详解Vue组件之间通信的七种方式

2023-08-24 15:03:10 61

使用Vue也有很长一段时间,但是一直以来都没对其组件之间的通信做一个总结,这次就借此总结一下。

父子组件之间的通信

1）props和$emit

父组件通过props将数据下发给props,子组件通过$emit来触发自定义事件来通知父组件进行相应的操作
具体代码如下:

```
//父组件


//子组件



```

2)vm.$parent和vm.$children

vm.$parent:父实例,如果当前实例有的话

vm.$children:获取当前实例的直接直接子组件,需要注意的是$children并不保证顺序,也不是响应式的

具体代码如下:

```
//父组件的代码



//子组件的代码



```

3)自定义事件的v-model

https://cn.vuejs.org/v2/guide/components-custom-events.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84-v-model
具体代码如下:

```
//父组件



//子组件



```

祖先组件和其子孙组件通信

1)provide/inject

provide/inject,允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下文关系成立的时间里始终生效

https://cn.vuejs.org/v2/api/#provide-inject

具体代码如下:

```
//父组件



//子组件



//孙组件



```

2)$attrs和$listeners

组件A下面有一个组件B,组件B下面有一个组件C,如果想将组件A的数据和自定义事件传递给组件C,就可以使用$attrs和$listeners。

vm.$attrs:当一个组件没有声明任何prop时(没有在props声明属性)，这里会包含所有父作用域的绑定，并且可以通过v-bind="$attrs"传入内部组件

vm.$listeners:包含了父作用域中的(不含.native修饰器的)v-on事件监听器。它可以通过v-on="$listeners"传入内部组件。

https://cn.vuejs.org/v2/api/#vm-attrs

具体代码如下:

```
//父组件



//子组件



//孙组件
```




```
```

非父子组件之间的通信

通过中央事件总线来进行通信

通过新建一个Vue事件的bus对象,然后通过bus.$emit来触发事件,bus.$on监听触发的事件。使用中央事件总线时,需要在手动清除它,不然它会一直存在,原本只执行一次的操作,将会执行多次。

具体代码如下:

```
//父组件


//one组件


//two组件


//index.js创建的bus
importVuefrom'vue';
exportconstBUS=newVue({
})
```

通过vuex来进行数据管理,具体内容见vuex官网

如果有什么不对的地方,或者还有什么方法我没有写到,希望大家可以提出来,谢谢。

总结

以上所述是小编给大家介绍的Vue组件之间通信的七种方式，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

详解Vue组件之间通信的七种方式

props和$emit

{{title}}

{{title}}

{{title}}

{{$attrs.msg}}

第一个组件

第二个组件

数量:{{num}}

随机推荐

详解Vue组件之间通信的七种方式

props和$emit

{{title}}

{{title}}

{{title}}

{{$attrs.msg}}

第一个组件

第二个组件

数量:{{num}}

热门推荐

随机推荐