Vue组件通讯

Posted 2021-02-09 niusan

组件通讯的关系： 父子组件通讯，兄弟组件通讯，跨级组件通讯。

父子组件通讯

<!--

当子组件像父组件传递数据时，就要用到自定义事件了。

Vue组件通讯模式

观察者模式 dispatchEvent和addEventListener

子组件用$emit() 来触发事件

this.$emit("addNum", this.count);

 

父组件用$on() 来监听子组件的事件

<brother

// v-model还可以创建自定义表单输入组件，进行数据绑定

v-model="modelNum" // 子组件事件 this.$emit("input", this.modelNum);

@addNum="emitEventAdd" //触发自定义事件

@click.native="clickComponent" // 原生事件

></brother>

 

父组件也可以直接在子组件的自定义标签上使用v-on

来监听子组件触发的自定义事件

v-on 除了监听DOM事件，也可以用.native监听DOM原生事件.监听的是该组件的根元素

v-model

this.$emit(‘input‘, number);

-->

 

 Bus /中央事件总线bus 、父链和子组件索引

/**

* 创建一个空的vue实例

* bus能够轻量巧妙的实现 父子 兄弟 跨级组件的通讯。

* 如果深入使用。也可以添加data,methods,computed等选项，这些都是公开的。

* 在遇到一些需要共享信息的时候，只需要在初始化Bus时获取一次，

* 任何事件，任何组件就可以使用了

*

* 如果项目比较大，可以选择更好的解决方案Vuex

*

* 除了中央事件总线Bus，还有两种方式能够实现组件通讯：

* 父链 和 子组件索引 递归向上或向下无限访问

* this.$parent 访问父组件。

* this.$children 访问子组件

*

* $refs只在组件渲染完成后才填充。并且是非响应式的。

* 它仅仅是作为直接方位子组件的应急方案。

*/

 Bus

触发： Bus.$emit("sendMessage", this.message);

响应： Bus.$on("sendMessage", val => {

this.message = val + "-" + Bus.busMessage;

});

 父链 

this.$parent 可以直接访问父组件的实例或者组件

this.$parent.h3Message = "from one";

子组件索引

通过this.$children来遍历找到子组件比较困难，通过ref指定一个索引名称

<two ref="two"></two>

this.$refs.two.parentMessage = "from index";