Vue组件通信深入分析_vue.js_

一、组件间的通信方式分类

• 父子组件之间的通信；
• 兄弟组件之间的通信；
• 祖孙与后代组件之间的通信；
• 非关系组件之间的通信。

二、props传递数据

适用场景：父组件传递数据给子组件；

• 子组件设置props属性，定义接收父组件传递过来的参数；
• 父组件在使用子组件标签中通过字面量来传递值

Person.vue

Student1.vue

效果

三、$emit 触发自定义事件

• 适用场景：子组件传递数据给父组件
• 子组件通过 $emit触发自定义事件，$emit第二个参数为传递的数值;
• 父组件绑定监听器获取到子组件传递过来的参数。

Student1.vue

Person.vue

四、ref标记

• 使用场景：子组件传递数据给父组件
• 父组件在使用子组件的时候设置ref
• 父组件通过设置子组件ref来获取数据

效果

五、EventBus事件总线

• 使用场景：任意组件传值
• 创建一个中央事件总线EventBus
• 兄弟组件通过$emit触发自定义事件，$emit第二个参数为传递的数值
• 另一个兄弟组件通过$on监听自定义事件

main.js

beforeCreate() { Vue.prototype.$bus = this } 

Student2.vue

Student1.vue

mounted() { this.$bus.$on('bus', (data) => { console.log(data) }) },

六、$parent 或 $root

使用方法类似全局事件总结

Vue.prototype.$parent = this

// 传数据 this.$parent.$emit('parent',this.age) //接数据 this.$parent.$on('parent', (data) => { console.log(data); })

七、vuex

• 使用场景：复杂关系的组件数据传递
• Vuex是一个用来存储共享变量的容器
• state：用来存放共享遍历的地方；
• getter：可以增加一个getter派生状态，用来获得共享变量的值；
• mutations：用来存放修改state的方法；
• actions也是用来存放修改state的方法，不过action是在mutations的基础上进行的。常用来做一些异步操作。

八、总结

• 父——>子：props；
• 子——>父：$emit,ref；
• 兄弟——>兄弟，任意——>任意：$bus。
• 复杂关系：vuex。

到此这篇关于Vue组件通信深入分析的文章就介绍到这了,更多相关Vue组件通信内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！