详解Vue组件之间通信的七种方式
使用Vue也有很长一段时间,但是一直以来都没对其组件之间的通信做一个总结,这次就借此总结一下。
为平南等地区用户提供了全套网页设计制作服务,及平南网站建设行业解决方案。主营业务为网站设计制作、成都网站制作、平南网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!
父子组件之间的通信
1)props和$emit
父组件通过props将数据下发给props,子组件通过$emit来触发自定义事件来通知父组件进行相应的操作
具体代码如下:
``` // 父组件// 子组件props和$emit
```{{msg}}
2)vm.$parent和vm.$children
vm.$parent: 父实例,如果当前实例有的话
vm.$children: 获取当前实例的直接直接子组件,需要注意的是$children并不保证顺序,也不是响应式的
具体代码如下:
``` // 父组件的代码// 子组件的代码{{title}}
```{{title}}
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
具体代码如下:
``` // 父组件// 子组件{{title}}
// 孙组件 ```
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
具体代码如下:
``` // 父组件// 子组件 // 孙组件 ``` ``` ```{{$attrs.msg}}
非父子组件之间的通信
通过中央事件总线来进行通信
通过新建一个Vue事件的bus对象,然后通过bus.$emit来触发事件,bus.$on监听触发的事件。使用中央事件总线时,需要在手动清除它,不然它会一直存在,原本只执行一次的操作,将会执行多次。
具体代码如下:
``` // 父组件// one组件 // two组件第一个组件
// index.js 创建的bus import Vue from 'vue'; export const BUS = new Vue({ }) ```第二个组件
数量: {{num}}
通过vuex来进行数据管理,具体内容见vuex官网
如果有什么不对的地方,或者还有什么方法我没有写到,希望大家可以提出来,谢谢。
总结
以上所述是小编给大家介绍的Vue组件之间通信的七种方式,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
分享名称:详解Vue组件之间通信的七种方式
分享链接:http://scyanting.com/article/gposih.html