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（全局事件总线实现兄弟或者爷孙之间的数据传递），那么就需要，开启全局事件总线，代码如下：

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

执行效果

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

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

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

Vue组件间的通信【子传父，父传子，同级传递，爷孙传递】相关推荐

vue 组件间的通信，子组件向父组件传值的方式总结
写vue,如果页面涉及到多个组件,就会涉及组件之间的通信,可能是父子组件间的通信,也可以是同级组件间的通信,那么,vue里面的组件如何通信.一般来说在vue的数据传递是在父组件传子组件通过属性来传,子 ...
Vue组件间通信的几种方式
引入用vue可以是要组件复用的,而组件实例的作用域是相互独立,这意味着不同组件之间的数据无法互相引用一般来说,组件之间可以有几种关系: 如上图所示,A 和 B.B 和 C.B 和 D 都是父子关系 ...
面试-vue组件间通信
说一说vue组件间的通信? 1.props,$emit,sync props父组件绑定传值,子组件声明props接收 props接收值原则上不允许改变,但对于对象属性改变,可能不会被vue检测到 $e ...
Vue组件之间的通信-父传子-子传父
文章目录 Vue的组件嵌套 Vue组件间通信 1.父组件传递给子组件 1.1数组的方式 1.2对象的方式 2.子组件传递给父组件 Vue的组件嵌套前面我们是将所有的逻辑放到一个App.vue中: 在 ...
vue组件间传值: 父传子、子传父、非父子组件传值
父组件向子组件传值 // 父组件通过属性将值传递给子组件 <template><div><closePopup :optionsID="optionsID&qu ...
vue组件间通信传递数据的四种方式（路由传参、父子组件传参、兄弟组件传参、深层次传参）
前言: vue组件间通信对于经常来写vue的伙伴来说应该是很轻松的,对于一些刚入门的伙伴来说可能就有些迷茫,感觉方式有很多种,但是总结起来又不知道应该怎么说,在下面的文章中,我结合自己的开发过程中经常 ...
Vue 组件间通信六种方式
前言组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系: 如上图所示,A 和 B.B 和 C.B 和 D ...
vue组件间通信六种方式
vue组件间通信六种方式组件之间的传值通信组件之间的通讯分为三种:父传子.子传父.兄弟之间的通讯: props/$emit 父传子:主要是通过props来实现的具体实现:父组件通过import引 ...
vue组件间通信方法集
整理vue中8种常规的通信方案 1.通过 props 传递 2.通过 $emit 触发自定义事件 3.使用 ref 4.EventBus 5.$parent 或$root 6.attrs 与 list ...

Vue组件间的通信【子传父，父传子，同级传递，爷孙传递】