<div id="box">
<div>
<demo-a></demo-a>
<demo-b></demo-b>
<demo-c></demo-c>
</div>
</div>
下面做的小demo是点击组件<demo-a></demo-a>的时候 将A组件里面的数据{a:'我是A组件'} 传给C组件，如下：
var vm = new Vue();
var A = {
data() {
return {
a: '我是A组件'
}
},
template: `
<div>
<span>{{a}}</span>
<input type="button" value="把A组件传给C" @click='send'>
</div>
`,
methods: {
send() {
vm.$emit('aaa', this.a)
}
}
};
var B = {
template: `
<div>
<span>我是A组件</span>
<input type="button" value="把B组件传给C">
</div>
`
}
var C = {
template: `
<div>
<span>我是C组件==></span>
<span>{{a}}</span>
</div>
`,
data() {
return {
a: ''
}
},
mounted() {
var _this = this
vm.$on('aaa', function (data) {
alert(data)
_this.a = data
})
}
}
new Vue({
el: '#box',
data: {
},
components: {
'demo-a': A,
'demo-b': B,
'demo-c': C
}
})
