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