vue 组件通信分为父组件与子组件通信、子组件与父组件通信、非父子关系组件通信三种
第一种大家都知道用props,引用子组件的时候定义个自定义属性,然后在子组件使用props接收
![](https://img.haomeiwen.com/i8799699/aed00568786d81af.png)
![](https://img.haomeiwen.com/i8799699/4c3750f4e5cb57d1.png)
比如 addfolder是一个子组件 ,需要传递一个参数bucketId,(其他的可忽略),bucketId可在data()定义,父子组件的写法如图所示
第二种子组件与父组件通信,可通过触发事件来实现,个人理解类似于回调
![](https://img.haomeiwen.com/i8799699/21c77f8216722249.png)
![](https://img.haomeiwen.com/i8799699/7c6589e767e9e517.png)
![](https://img.haomeiwen.com/i8799699/a9ec2ad3fc167541.png)
比如tree为一个子组件,showtree为父组件的一个变量,那么要在子组件里修改父组件变量的值,传一个自定义事件 showtreebox,在子组件用$emit的方式 触发事件并传过来参数值,就可以改变父组件的变量值了
第三种就是兄弟组件或者没有逻辑关系的组件直接通信了,这时候就需要一个中转站了
新建一个js文件比如命名为eventbus.js,创建一个事件中心
![](https://img.haomeiwen.com/i8799699/55d67cdf1b6e87e6.png)
然后在需要通信的组件引入这个文件
![](https://img.haomeiwen.com/i8799699/046973aea02e0e6d.png)
接收的组件注册一个事件,名字为getTreeData ,这个事件执行一个组件内的方法 getTree()
![](https://img.haomeiwen.com/i8799699/9b201d39621d8093.png)
在另外的组件触发getTreeData事件就可以执行了
![](https://img.haomeiwen.com/i8799699/a7ab7b7ffea42f46.png)
网友评论