vue3.x组件间通信，实用小技巧都在这里

Posted 2021-10-26 杂学不精

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue3.x组件间通信，实用小技巧都在这里相关的知识，希望对你有一定的参考价值。

本想简单写写，没想到说清楚已经变成了一篇很长的帖子，欢迎当笔记搜藏起来。

props / emits 父子组件通信

props一般负责向子组件传递数据
下面是一个简单的例子，父组件向子组件传递了一个title，子组件负责显示title。

// child-component.vue
<template>
  <h2>{{ title }}</h2>
</template>

<script>
  export default {
    name: "child-component",
    props: [\'title\'] //可以注册多个prop
  }
</script>

// 父组件中，使用子组件
<ChildComponent :title="\'这是传递的Title\'"></ChildComponent>

emits主要用于监听子组件事件
开发过程中子组件可能需要与父级组件进行沟通，这时我们就需要用到emits。下面是一个简单的例子，点击子组件按钮时，改变了父组件显示的信息。

// child-component.vue
<button @click="$emit(\'textChange\', \'子组件被点击了\')">点我</button>

// 父组件中，使用子组件
<template>
  <div>
    <div>{{ msg }}</div>
    <ChildComponent @textChange="msg = $event"></ChildComponent>
  </div>
</template>

<script>
  import ChildComponent from "./child-component"
  export default {
    components: {
      ChildComponent
    },
    data() {
      return {
        msg: \'test msg!\'
      }
    }
  }
</script>

prop 类型、验证以及默认值
这三块内容在官网篇幅还挺长的，感觉上重点却不多，我们上面注册props的时候使用的数组，如：["title"]，其实实际开发过程中，为了传值的清晰，我们用的都是对象，此外我们会指定其类型，验证规则，以及给出默认值，三者都是可选的，看下面的例子：

export default {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default() {
        return { message: \'hello\' }
      }
    },
    // 自定义验证函数
    propF: {
      validator(value) {
        // 这个值必须匹配下列字符串中的一个
        return [\'success\', \'warning\', \'danger\'].includes(value)
      }
    },
    // 具有默认值的函数
    propG: {
      type: Function,
      // 与对象或数组默认值不同，这不是一个工厂函数 —— 这是一个用作默认值的函数
      default() {
        return \'Default function\'
      }
    }
  }
}

注意：
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。

另外，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。
但是，如果prop传递的是一个对象或者数组，我们是可以改变其内部的数据的，同时这个改变会变更对象或数组本身，从而影响到其所在父组件的状态。

vue3的新选项emits
vue 3 提供了一个 emits 选项，和现有的 props 选项类似。这个选项可以用来定义一个组件可以向其父组件触发的事件。emits 选项中列出的事件不会从组件的根元素继承，也将从$attrs property中移除。

emits 可以是数组或对象，从组件触发自定义事件，emits 可以是简单的数组，也可以是对象，后者允许配置事件验证（因为返回false也依旧会继续调用事件，所以作者本人没理解验证这块，有知道的小伙伴欢迎留言）。使用如下：

emits: {
  // 没有验证函数
  click: null,

  // 带有验证函数
  submit: payload => {
    if (payload.email && payload.password) {
      return true
    } else {
      return false // 返回false事件依旧会继续被调用
    }
  }
}

因为不声明emits也可以使$emit来调用传递的事件，所以看似用处不大，但声明首先可以使代码清晰，可以一眼看到向其父组件透传的事件。同时需要向其父组件透传原生事件（如：@ckick）的组件来说，不声明会导致事件被触发两次，而声明可以避免这类问题。

provide / inject 多层嵌套组件通信

使用场景：
1、多层嵌套组件传值
2、父子组件相互寻找比较麻烦，如slot

简单示例：

// 父组件 提供对象
provide: {
  user: \'John Doe\'
}

// 子组件，接收对象
inject: [\'user\'],
created() {
  console.log(`Injected property: ${this.user}`) // > 注入 property: John Doe
}

访问组件实例 property（用this），我们需要将 provide 转换为返回对象的函数

// 父组件
data() {
  return {
    userName: \'test name\',
  }
},
provide() {
  return {
    user: this.userName
  }
}

响应性注意这里传递的是值，并不是响应式的，官网建议分配一个组合式 API computed property：

// 来自官网的建议
todoLength: Vue.computed(() => this.todos.length)

个人建议直接传递一个对象过去，利用指针传递来实现响应式。（简单粗暴）如果非要了解可以关注后续再写文章中关于 reactive provide/inject 的信息

$attrs / $parent / $refs 能抓到猫就是好老鼠系列

$attrs 包含了父作用域中不作为组件 props 或 emits 的 attribute 绑定和事件。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定，并且可以通过 v-bind="$attrs" 传入内部组件——这在创建高阶的组件时会非常有用。
示例：

// 父组件中
<ChildComponent title="123" titleProp="456"></ChildComponent>

// 子组件中
props: [\'titleProp\'],
created() {
  console.log(this.$attrs.title); // 123
  console.log(this.$attrs.titleProp); // undefined
  
  console.log(this.title); // undefined
  console.log(this.titleProp); // 123
}

$parent 这是父实例，如果当前实例有的话。简单粗暴拿着实例各种用。

$refs 一个对象，持有注册过ref的所有 DOM 元素和组件实例。父组件使用其可以轻易的获取子组件，并各种使用。

eventBus 事件总线vue3不支持了

在绝大多数情况下，不鼓励使用全局的事件总线在组件之间进行通信。虽然在短期内往往是最简单的解决方案，但从长期来看，它维护起来总是令人头疼。
如果非得要用，可以使用一些外部第三方库，例如 mitt 或 tiny-emitter

// eventBus.js
import emitter from \'tiny-emitter/instance\'

export default {
  $on: (...args) => emitter.on(...args),
  $once: (...args) => emitter.once(...args),
  $off: (...args) => emitter.off(...args),
  $emit: (...args) => emitter.emit(...args),
}

vuex 和自定义共享对象

vuex 轻松获取响应式的全局数据。

业务独立的组件通信更推荐的做法是自定义一个js对象，用js对象来保存共享数据和函数。export是一个对象的话，import之后访问的是同一个对象，其可以方便的提供数据共享和函数调用。此外，如果想要不同的对象可以export一个工厂函数。

总结

props / emits 应该是父子组件之间沟通的首选。兄弟节点可以通过它们的父节点通信。
provide / inject 允许一个组件与它的插槽内容进行通信。这对于总是一起使用的紧密耦合的组件非常有用。
provide / inject 也能够用于组件之间的远距离通信。它可以帮助避免“prop 逐级透传”，即 prop 需要通过许多层级的组件传递下去，但这些组件本身可能并不需要那些 prop。
prop 逐级透传也可以通过重构以使用插槽来避免。如果一个中间组件不需要某些 prop，那么表明它可能存在关注点分离的问题。在该类组件中使用 slot 可以允许父节点直接为它创建内容，因此 prop 可以被直接传递而不需要中间组件的参与。
全局状态管理，比如 Vuex

Vue2.x中的父子组件相互通信

原理

在 Vue.js 中，父子组件的关系可以总结为 props down, events up 。

父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。看看它们是怎么工作的。

业务场景

这里指的是直接父子级关系的通信

美女(子组件)将消息发送给大群(父组件)
大群(父组件)收到美女发送的消息后再回个信息给美女(子组件)

父组件

template

<template>
    <div>
        <p>群消息girl：</p>
        <div>
            {{ somebody }} 说: 我 {{ age }} 了。
        </div>
        <hr>
        <v-girl-group 
                :girls="aGirls" 
                :noticeGirl="noticeGirl"
                @introduce="introduceSelf"></v-girl-group>
    </div>
</template>

注意的点：

这里在父组件使用v-on来监听子组件上的自定义事件($emit的变化),一旦发生变化noticeGirl方法就会触发

<script>
import vGirlGroup from \'./GirlGroup\'

export default {
    name: \'girl\',
    components: {
        vGirlGroup
    },
    data () {
        return {
            aGirls:[{
                name:\'小丽\',
                age:22
            },{
                name:\'小美\',
                age:21
            },{
                name:\'小荷\',
                age:24
            }],
            somebody:\'\',
            age:\'\',
            noticeGirl:\'\'
        }
    },
    methods: {
        introduceSelf (opt) {
            this.somebody = opt.name;
            this.age = opt.age;

            // 通知girl收到消息
            this.noticeGirl = opt.name + \',已收到消息\';
        }
    }
}

</script>

注意的点:

这里methods中定义的方法introduceSelf就是父组件接收到子组件发出的$emit的事件处理程序

子组件

template

<template>
    <div>
       <ul>
           <li v-for="(value, index) in girls">
                {{ index }} - {{ value.name }} - {{ value.age }} 
                <button @click="noticeGroup(value.name,value.age)">发送消息</button>
            </li> 
       </ul>
       <div>接收来自大群的消息:{{ noticeGirl }}</div>
    </div>
</template>

script

<script>
export default {
    name: \'girl-group\',
    props: {
        girls: {
            type: Array,
            required: true
        },
        noticeGirl: {
            type: String,
            required: false
        }
    },
    methods: {
        noticeGroup (name, age) {
            this.$emit(\'introduce\',{
                name: name,
                age: age
            })
        }
    }
}
</script>

注意的点: