Vue. js example of parameter passing between parent and child components

Example: App. vue is the parent. After introducing componetA component, tags can be used in template (note that hump writing should be changed to componet-a writing, because html is insensitive to case, and componenta and componentA are the same for it, which is difficult to distinguish, so lowercase-lowercase writing is used). In the child component componetA, after declaring the props parameter 'msgfromfa', you can receive the parameters passed from the parent to the child component. In the example, msgfromfa is displayed in the < p > In the label.

In App. vue

 <component-a msgfromfa="(Just Say U Love Me)"></component-a> 

import componentA from './components/componentA'

export default {

new Vue({

components: {

componentA

}

})

} 

In componentA. vue

<p>{{ msgfromfa }}</p> 

export default {

props: ['msgfromfa']

} 

Parent passes parameters to child components (. $broadcast)

Usage: vm. $broadcast (event, [... args]) broadcasts events to all descendants of the current instance. Because future generations have multiple branches, events will be notified along various "paths".

Example: In the parent component App. vue < input > The keyboard event is bound, the carriage return triggers the addNew method, the broadcast event "onAddnew" is transmitted to the reference this. items. In the subcomponent componentA, the "onAddnew" event is registered, and the received parameter items is printed.

In App. vue

<div id="app">
<input v-model="newItem" @keyup.enter="addNew"/>
</div>

import componentA from './components/componentA'
export default {
new Vue({
methods: {
addNew: function() {
this.$broadcast('onAddnew', this.items)
}
}
})
}

In componentA. vue

import componentA from './components/componentA'

export default {

events: {

'onAddnew': function(items){

console.log(items)

}

}

} 

Child component passes parameters to parent (. $emit)

Usage: vm. $emit (event, [... args]), triggers an event on the current instance. Additional parameters are passed to the listener callback.

Example: listenToMyBoy. listenToMyBoy in vue is bound with the custom event "child-say". In componentA, the event "child-say" is triggered after clicking the button, and msg is transmitted to the parent component. listenToMyBoy method in the parent component assigns msg to childWords, which is displayed in < p > In the label.
In App. vue

<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){
this.childWords = msg
}
}
})
}

In componentA. vue

<button v-on:click="onClickMe">like!</button>

import componentA from './components/componentA'

export default {

new Vue({

components: {

componentA

}

})

} 

0

Child component passes parameters to parent (. $dispatch)

Usage: vm. $dispatch (event, [... args]), dispatches an event, firing it first on the instance, then bubbling up the parent chain and stopping after firing 1 listener.

Example: App. "child-say" event is registered in events in vue. In componentA, the "child-say" event is triggered after clicking the button, and msg is transmitted to the parent component. The "child-say" method in the parent component assigns msg to childWords, which is displayed in < p > In the label.

App. vue

import componentA from './components/componentA'

export default {

new Vue({

components: {

componentA

}

})

} 

1

import componentA from './components/componentA'

export default {

new Vue({

components: {

componentA

}

})

} 

2

componentA. vue

<button v-on:click="onClickMe">like!</button>

import componentA from './components/componentA'

export default {

new Vue({

components: {

componentA

}

})

} 

4