Example: As the parent, after introducing the componentA component, you can use the tag in the template (note that the camel writing method should be changed to the component-a writing method, because html is not case sensitive, componenta and componentA are the same for it and are difficult to distinguish, so use the lowercase-lowercase writing method). In the child component componentA, after declaring the props parameter 'msgfromfa', you can receive the parameters passed by the parent to the child component. In the example, display msgfromfa in the <p> tag.
middle
<component-a msgfromfa="(Just Say U Love Me)"></component-a>
import componentA from './components/componentA'
export default {
new Vue({
components: {
componentA
}
})
}
middle
<p>{{ msgfromfa }}</p>
export default {
props: ['msgfromfa']
}
Parent passes parameters to child components (.$broadcast)
Usage: vm.$broadcast( event, […args] ) broadcasts the event and notifies all descendants of the current instance. Because descendants have multiple branches, events will be notified along each "path".
Example: The <input> in the parent component is bound to the keyboard event, the carriage Enter triggers the addNew method, the broadcast event "onAddnew" and the parameter is passed. In the subcomponent componentA, register the "onAddnew" event and print the received parameter items.
middle
<div > <input v-model="newItem" @="addNew"/> </div>
import componentA from './components/componentA'
export default {
new Vue({
methods: {
addNew: function() {
this.$broadcast('onAddnew', )
}
}
})
}
middle
import componentA from './components/componentA'
export default {
events: {
'onAddnew': function(items){
(items)
}
}
}
The child component passes the parameter (.$emit) to the parent
Usage: vm.$emit( event, […args] ), triggering an event on the current instance. Additional parameters are passed to the listener callback.
Example: In component-a, the custom event "child-say" is bound to. In the child component componentA, the "child-say" event is triggered after clicking the button, and the msg parameter is passed to the parent component. The listenToMyBoy method in the parent component assigns msg to childWords and displays it in the <p> tag.
middle
<p>Do you like me? {{childWords}}</p>
<component-a msgfromfa="(Just Say U Love Me)" v-on:child-say="listenToMyBoy"></component-a>
import componentA from './components/componentA'
export default {
new Vue({
data: function () {
return {
childWords: ""
}
},
components: {
componentA
},
methods: {
listenToMyBoy: function (msg){
= msg
}
}
})
}
middle
<button v-on:click="onClickMe">like!</button>
import componentA from './components/componentA'
export default {
data: function () {
return {
msg: 'I like you!'
}
},
methods: {
onClickMe: function(){
this.$emit('child-say',);
}
}
}
The child component passes parameters to the parent (.$dispatch)
Usage: vm.$dispatch( event, […args] ), dispatches an event, first triggering it on the instance, and then bubbles upward along the parent chain and stops after triggering a listener.
Example: Register the "child-say" event in events. In the child component componentA, the "child-say" event is triggered after clicking the button, and the msg parameter is passed to the parent component. The "child-say" method in the parent component assigns msg to childWords and displays it in the <p> tag.
middle
<p>Do you like me? {{childWords}}</p>
<component-a msgfromfa="(Just Say U Love Me)"></component-a>
import componentA from './components/componentA'
export default {
new Vue({
events: {
'child-say' : function(msg){
= msg
}
}
})
}
middle
<button v-on:click="onClickMe">like!</button>
import componentA from './components/componentA'
export default {
data: function () {
return {
msg: 'I like you!'
}
},
methods: {
onClickMe: function(){
this.$dispatch('child-say',);
}
}
}
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.