Vue.js父与子组件之间传参示例
例子：app.vue为父，引入componeta组件之后，则可以在template中使用标签（注意驼峰写法要改成componet-a写法，因为html对大小写不敏感，componenta与componenta对于它来说是一样的，不好区分，所以使用小写-小写这种写法）。而子组件componeta中，声明props参数'msgfromfa'之后，就可以收到父向子组件传的参数了。例子中将msgfromfa显示在<p>标签中。
app.vue中
<component-a msgfromfa="(just say u love me)"></component-a>
import componenta from './components/componenta'
export default {
new vue({
components: {
componenta
}
})
}
componenta.vue中
<p>{{ msgfromfa }}</p>
export default {
props: ['msgfromfa']
}
父向子组件传参（.$broadcast）
用法：vm.$broadcast( event, […args] )广播事件，通知给当前实例的全部后代。因为后代有多个枝杈，事件将沿着各“路径”通知。
例子：父组件app.vue中<input>绑定了键盘事件，回车触发addnew方法，广播事件”onaddnew”，并传参this.items。子组件componenta中，注册”onaddnew”事件，打印收到的参数items。
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)
}
}
})
}
componenta.vue中
import componenta from './components/componenta'
export default {
events: {
'onaddnew': function(items){
console.log(items)
}
}
}
子组件向父传参（.$emit）
用法：vm.$emit( event, […args] )，触发当前实例上的事件。附加参数都会传给监听器回调。
例子：app.vue中component-a绑定了自定义事件”child-say”。子组件componenta中，单击按钮后触发”child-say”事件，并传参msg给父组件。父组件中listentomyboy方法把msg赋值给childwords，显示在<p>标签中。
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
}
}
})
}
componenta.vue中
<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',this.msg);
}
}
}
子组件向父传参（.$dispatch）
用法：vm.$dispatch( event, […args] )，派发事件，首先在实例上触发它，然后沿着父链向上冒泡在触发一个监听器后停止。
例子：app.vue中events中注册”child-say”事件。子组件componenta中，单击按钮后触发”child-say”事件，并传参msg给父组件。父组件中”child-say”方法把msg赋值给childwords，显示在<p>标签中。
app.vue中
<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){
this.childwords = msg
}
}
})
}
componenta.vue中
<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',this.msg);
}
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。