阅读 398

浅谈Vue中的12种组件通信方式及理解

重新梳理了一下,个人认为Vue中组件通信思想与React一致,都是单向数据流,高阶流向低阶(父传子),子组件只可通知父组件,此时数据还是在父级变更而不是发生流动。

1. props

高频使用

父组件向子组件传递参数。 Vue文档: props

2. $emit

高频使用

子组件通知父组件执行对应函数,可携带参数。 Vue文档: $emit

3. $refs

高频使用,也可用在DOM元素操作

通信上属于父组件向子组件传递。通过给子组件设置ref属性,使用 this.$refs 对象来获取实例,即可直接访问及调用子组件上的属性和方法。 Vue文档: refs

4. Vuex 状态管理器

需注意场景使用,可以很好地满足复杂数据交互,在SPA应用中无障碍通信,但频繁使用会增加代码耦合度。

主要以StateGettersMutationsActions四个核心组成,约定了对数据的变更只在 Mutations 中,以 store.commit触发,异步操作则放在 Actions 中,以 store.dispatch 触发。 Vuex官网文档

5. $root$parent$children

不常使用

这三个的作用都直接地体现在字面上。从组件通信层面上讲,用$root的场景不如使用Vuex,$parent$emit 更好,而 $children 的使用场景几乎没有,毕竟 $refs 就够用了。 Vue文档: 处理边界情况

6. .sync修饰符

不推荐使用

在通信方式中的经历最为曲折,曾被无情删除后来又重新添加,实现的是数据在通信中的“双向绑定”,其理念有违组件通信的原则所以不是很推荐使用,原理其实是对$emit进行了一层包装,让代码写的更少了而已。 Vue文档: sync-修饰符

7. $attrs

高阶组件中常用

平时基本不会用到,但在组件颗粒度较细的场景中,以上提到的方式都不能优雅地解决诸如:A组件嵌套了B组件又嵌套了C组件,此时C要与A通信的情形,Vuex会增加代码耦合度得不偿失,$root又局限于A组件必须是为根组件,难道只能从A传到B再从B传到C吗?是的,但$attrs提供了一种传递“剩余参数”的作用,使操作更简便,用一个例子来了解更直观:

// 在 A.vue 中 :

<template>
    <B name="shawn" id="1" /> <!-- 向B传递了参数name和id -->
</template>
<script>
import B from './B.vue'
.....

// 在 B.vue 中 :

<template>
    {{ $attrs }} <!-- 显示: { name: 'shawn', id: '1' } -->
    <C v-bind="$attrs" /> <!-- 并未定义具体传哪些参数 -->
</template>
<script>
import C from './C.vue'
......
    props: { id } // B中定义了对id的接收,那么就会被$attrs忽略,如果这里没有定义props,那么A传给B的数据会如数传到C那边

// 在 C.vue 中 :

<template>
    {{ $attrs }} <!-- 显示: { name: 'shawn' } -->
</template>
复制代码

Vue文档: attrs

8. $listeners

高阶组件中常用

$attrs差不多,在上面的例子中往C组件添加属性 v-on="$listeners" 即可,此时C组件能使用$emit调用A组件挂载的对应函数。 Vue文档: listeners

9. v-slot插槽

组件化开发中较常用,此时组件中的通信可视为传递了模板代码

注意slotslot-scope是Vue早已废除的attribute,与v-slot并不相等。 Vue文档: v-slot

10. Event Bus

较少使用

典型的发布订阅模式,我比较喜欢叫它事件广播,用法简单,强在解耦能力。

11. 路由传参

SPA应用中页面跳转可以视为组件变更,所以页面之间的通信也算组件通信了

this.$router.push({
    name: 'xxx', // params传参一定要写name,只写path传参会失败
    params: { /* 目标页面中this.$route.params...来获取 **/ },
    query: { /* 参数写进url中传递,意味着刷新不会丢失 **/ }
})
复制代码

12. provide inject

开发组件库时使用

允许一个祖先组件向其所有子孙后代注入一个依赖,provide向下派发inject用来接收。业务开发中无使用场景。 Vue文档: provide-inject

文章分类
前端
文章标签