Vue组件间的通信

引出问题

vue一个重要的思想就是组件化开发，说到组件化开发，提高结构样式行为的复用性，组件写好了，但组件间之间数据如何传递，就成了一个问题…

vue 组件之间是可以相互嵌套的，就像一个盒子，里面放了两个小盒子，这样就可以形成父子三个，兄弟两个的情况

那么我用一个自己写的小 demo 来说一下数据如何通信，在这里我设置一个场景，父亲和儿子以及未来儿媳妇的故事~

故事开始

有一位父亲，有一个儿子，儿子有一个对象，在这里说明等级，父亲就是父级别组件，儿子和对象是同级别组件。 故事进行中… 父亲给了儿子一套房子，儿子给对象说这以后就是咱们到家了。对象对父亲表达感谢。

故事分析

父亲给儿子一套房子：父传子（用到技术：属性绑定）儿子给对象说咱们有房子了：同级别组件之间传递数据（用到技术：$bus全局事件总线 ）对象给父亲表达感谢：子传父(用到技术：自定义事件)

代码实现

父亲组件代码如下：

<template><div><p>我是{{name}}</p><p>这是儿子对我说的话：{{formSon}}</p><p>这是儿媳妇对我说的话：{{formDou}}</p><Brother :house="house" @thanks="thanks"></Brother><Brother2 @thank="thank"></Brother2></div></template><script>import Brother from './brother1.vue'import Brother2 from './brother2.vue'export default {name: 'TodoTestFather',data() {return {name:'father',house:'这是给儿子的婚房',formSon:'',formDou:''};},components:{Brother,Brother2},methods:{thanks(message){this.formSon= message},thank(message){this.formDou = message}}};</script><style scoped>p{background-color: rgb(255, 71, 71);}</style>

儿子组件

<template><div><p>我是老公：{{name}}</p><p>我今年：{{age}}岁了</p><p>我收到了父亲的数据：{{house}}</p><p> <button @click="thankFather">感谢父亲赠与的家</button></p><p>老婆对我说：{{fromWife}}</p><p><button @click="tellWife">告诉老婆咱们有房子啦</button></p></div></template><script>export default {name: 'TodoTestBrother1',props:['house'],data() {return {name:'王雷旺',age:'22',fromWife:''};},mounted() {this.$bus.$on('fromWife', (data)=>{this.fromWife = data})},methods: {thankFather(){this.$emit('thanks', '谢谢老爸的房子');},tellWife(){this.$bus.$emit('formHusband','老爸给咱们了一套房子老婆')}},};</script><style scoped>p{background-color: yellow;}</style>

对象（儿媳妇组件）

<template><div><p>我是老婆：{{name}}</p><p>我今年：{{age}}岁了</p><p><button @click="thankFather">感谢父亲赠与的家</button></p><p>我收到了老公的来信：{{formHunband}}</p><p><button @click="thankHusband">感谢老公</button></p></div></template><script>export default {name: 'TodoTestBrother2',data() {return {name:'陈彦戈',age:21,formHunband:''};},mounted() {this.$bus.$on('formHusband', (data)=>{this.formHunband = data})},methods: {thankFather(){this.$emit('thank','谢谢爸爸，爸爸辛苦了，请喝茶')},thankHusband(){this.$bus.$emit('fromWife','谢谢老公我们有家啦！')}},};</script><style scoped>p{background-color: palevioletred;}</style>

如何开启全局事件总线

另外说一下 想使用 $bus（全局事件总线实现兄弟或者爷孙之间的数据传递），那么就需要，开启全局事件总线，代码如下：

//创建vmnew Vue({el:'#app',render: h => h(App),beforeCreate(){Vue.prototype.$bus= this //安装全局事件总线 }})

执行效果

父传子：（下面是父亲给儿子说的话）

子传父：

儿子和对象之间的数据传递

我们家伍佰(英短)8个月啦~