vue组件间通信的几种方式,如props、
e
m
i
t
/
emit/
emit/on、vuex、$parent /
c
h
i
l
d
r
e
n
、
children、
children、attrs/
l
i
s
t
e
n
e
r
s
和
p
r
o
v
i
d
e
/
i
n
j
e
c
t
1.
p
r
o
p
s
/
listeners和provide/inject 1.props/
listeners和provide/inject1.props/emit
父组件A通过props的方式向子组件B传递,B to A 通过在 B 组件中 $emit, A 组件中 v-on 的方式实现。
子组件通过events给父组件发送消息,实际上就是子组件把自己的数据发送到父组件。
2.2.
a
t
t
r
s
和
attrs和
attrs和listeners
第一种方式处理父子组件之间的数据传输有一个问题:如果父组件A下面有子组件B,组件B下面有组件C,这时如果组件A想传递数据给组件C怎么办呢?
如果采用第一种方法,我们必须让组件A通过prop传递消息给组件B,组件B在通过prop传递消息给组件C;要是组件A和组件C之间有更多的组件,那采用这种方式就很复杂了。Vue 2.4开始提供了
a
t
t
r
s
和
attrs和
attrs和listeners来解决这个问题,能够让组件A之间传递消息给组件C。
3.中央事件总线
上面两种方式处理的都是父子组件之间的数据传递,而如果两个组件不是父子关系呢?这种情况下可以使用中央事件总线的方式。新建一个Vue事件bus对象,然后通过bus.
e
m
i
t
触
发
事
件
,
b
u
s
.
emit触发事件,bus.
emit触发事件,bus.on监听触发的事件。
但是bus传过来的值再页面刷新后 是不复存在的, 这里有个刷新的问题,一般传来的值会另外的存储起来
-
provide和inject
父组件中通过provider来提供变量,然后在子组件中通过inject来注入变量。不论子组件有多深,只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据,只要在父组件的生命周期内,子组件都可以调用。 -
v-model
父组件通过v-model传递值给子组件时,会自动传递一个value的prop属性,在子组件中通过this.$emit(‘input’,val)自动修改v-model绑定的值 这是vue内部的双向绑定
6.vuex处理组件之间的数据交互
vuex的做法就是将这一些公共的数据抽离出来,然后其他组件就可以对这个公共数据进行读写操作,这样达到了解耦的目的。