父子通信)"/>
vue组件之(父与子和非父子通信)
父子组件通信
父子组件传值通信
假设第二层组件想和第一层组件进行通信,分析其传值过程
1、(第一层向第二层传值):父组件通过props传值到子组件,如此便实现父子组件向下通信
2、(第二层向第一层传值):子组件通过触发自定义事件$emit向父组件传值,如此便实现了父子组件向上通信
跨级组件通信
假设第三层组件想和第一层组件进行通信
1、(第一层组件向第三层组件传值)—禁止第一层直接传值到第三层,需要逐层传递,即1→2→3,此时便可以实现跨级组件向下通信
2、(第三层组件向第一层组件传值)—通过触发自定义事件将数据传递至第二层,然后第二层通过事件触发传递至第一层,如此逐层传递,便可以实现跨级组件向上通信
兄弟组件通信
假设第三层组件想和同层的另一个组件进行通信。
如果还是逐层传递至第二层,再由第二层传递至第三层,此时代码量十分累赘复杂,这也不符合Vue的定
义(Vue是一个轻量级的视图层框架)
引用官方文档:
因为基于组件树结构的事件流方式让人难以理解,并且在组件结构扩展的过程中会变得越来越脆弱。这种事件方式确实不太好,我们也不希望在以后让开发者们太痛苦。
官方推荐的状态管理方案是 Vuex。不过如果项目不是很大,状态管理也没有很复杂的话,使用 Vuex 有种杀鸡用牛刀的感觉,当然,这也是要根据自己的需求来的。
本节介绍下另一种方法,即bus/总线/发布订阅模式/观察者模式来解决
文档术语:
通过使用事件中心,允许组件自由交流,这个集中式的事件中间件就是 Bus总线。
语法:
在组件中使用$emit, $on, $off 分别来分发、监听、取消监听事件
父子组件通信:
<!-- html代码 --><div id="demo" v-cloak>一级{{moneyValue}}<my-demo :money="moneyValue" @pass="cutFn"></my-demo></div>// vue代码Vueponent('my-demo', {props: ["money"],data() {return {childMoney: this.money},template: `<div @click="cut">我是子组件我从父组件那里接受了{{childMoney}}</div>`,methods: {cut() {this.childMoney--;this.$emit("pass", this.childMoney)}}}) var demo = new Vue({el: "#demo",data: {moneyValue: 6000},methods: {cutFn(option) {console.log(option)this.moneyValue = option}}
更多推荐
vue组件之(父与子和非父子通信)
发布评论