Vue2.x 组件通信共有12种
- props
- $emit / v-on
- .sync
- v-model
- ref
- $children / $parent
- $attrs / $listeners
- provide / inject
- EventBus
- Vuex
- $root
- slot
父子组件通信可以用:
- props
- $emit / v-on
- $attrs / $listeners
- ref
- .sync
- v-model
- $children / $parent
兄弟组件通信可以用:
- EventBus
- Vuex
- $parent
跨层级组件通信可以用:
- provide/inject
- EventBus
- Vuex
- $attrs / $listeners
- $root
vue2通信使用
-
props
父组件向子组件传递数据
子组件接受到数据之后, 不能直接修改父组件的数据。会报错,所以当父组件重新渲染时,数据会被覆盖。如果子组件内要修改的话推荐使用 computed -
$emit / v-on
子组件通过派发事件的方式给父组件数据,或者触发父组件更新等操作 -
.sync
可以帮我们实现父组件向子组件传递的数据的双向绑定,所以子组件接收到数据后可以直接修改,并且会同时修改父组件的数据 -
v-model
和 .sync 类似,可以实现将父组件传给子组件的数据为双向绑定,子组件通过 $emit 修改父组件的数据 -
ref
ref 如果在普通的DOM元素上,引用指向的就是该DOM元素
如果在子组件上,引用的指向就是子组件实例,然后父组件就可以通过 ref 主动获取子组件的属性或者调用子组件的方法 -
$children / $parent
$children:获取到一个包含所有子组件(不包含孙子组件)的 VueComponent 对象数组,可以直接拿到子组件中所有数据和方法等
$parent:获取到一个父节点的 VueComponent 对象,同样包含父节点中所有数据和方法等 -
$attrs / $listeners
多层嵌套组件传递数据时,如果只是传递数据,而不做中间处理的话就可以用这个,比如父组件向孙子组件传递数据时
a t t r s :包含父作用域里除 c l a s s 和 s t y l e 除外的非 p r o p s 属性集合。通过 t h i s . attrs:包含父作用域里除 class 和 style 除外的非 props 属性集合。通过 this. attrs:包含父作用域里除class和style除外的非props属性集合。通过this.attrs 获取父作用域中所有符合条件的属性集合,然后还要继续传给子组件内部的其他组件,就可以通过 v-bind=“$attrs”
l i s t e n e r s :包含父作用域里 . n a t i v e 除外的监听事件集合。如果还要继续传给子组件内部的其他组件,就可以通过 v − o n = " listeners:包含父作用域里 .native 除外的监听事件集合。如果还要继续传给子组件内部的其他组件,就可以通过 v-on=" listeners:包含父作用域里.native除外的监听事件集合。如果还要继续传给子组件内部的其他组件,就可以通过v−on="linteners"
使用方式是相同的 -
provide / inject
provide:可以让我们指定想要提供给后代组件的数据或方法
inject:在任何后代组件中接收想要添加在这个组件上的数据或方法,不管组件嵌套多深都可以直接拿来用
要注意的是 provide 和 inject 传递的数据不是响应式的,也就是说用 inject 接收来数据后,provide 里的数据改变了,后代组件中的数据不会改变,除非传入的就是一个可监听的对象 -
EventBus
EventBus 是中央事件总线,不管是父子组件,兄弟组件,跨层级组件等都可以使用它完成通信操作 -
Vuex
Vuex 是状态管理器,集中式存储管理所有组件的状态。 -
$root
$root 可以拿到 App.vue 里的数据和方法 -
slot
就是把子组件的数据通过插槽的方式传给父组件使用,然后再插回来