Vue3基础之provide/inject依赖和注入

简述

在项目中，父组件传值数据给子组件，我们都知道怎么实现，那么父组件传值给子组件的子组件呢？我们一般想法是通过传值子组件，子组件再传值给子的子组件。这样维护不容易还容易出现问题，那么Vue为我们提供了provide/inject，依赖和注入。

• 误区
  我一开始写这个小Demo的时候，思路是点击按钮后，数据+1，再给子组件传值，发现provide不能写入到函数中，其实我们可以换一个角度，因为是数据绑定，所以我们只需要对数据进行操作即可。

关键引入

  import {provide } from 'vue';  //提供/依赖
  import { inject } from 'vue';   // 注入

• provide

1. 第一个参数被称为注入名，可以是一个字符串或是一个 Symbol。后代组件会用注入名来查找期望注入的值。一个组件可以
   多次调用 provide()，使用不同的注入名，注入不同的依赖值。
2. 第二个参数是提供的值，值可以是任意类型，包括响应式的状态，比如一个 ref
3. 注入方的组件不可更改 readonly

<script setup>
import { ref, provide, readonly } from 'vue'

const count = ref(0)
provide('read-only-count', readonly(count))
</script>

• inject

1. 默认情况下，inject 假设传入的注入名会被某个祖先链上的组件提供。如果该注入名的确没有任何组件提供，则会抛出一个运行时警告
2. 如果在注入一个值时不要求必须有提供者，那么我们应该声明一个默认值，和 props 类似：const value = inject('message', '这是默认值')

结构

• 父组件
• A是父的子组件
• B是A的子组件

代码

• 父组件

<template>
<div> 
   <div class="div1">
       <button @click="tailNum">
           传值子组件们
       </button> 
       <A></A>
   </div> 
</div>
</template>
<script setup>  
import {ref, provide } from 'vue'; 
import A from './A.vue';
const count = ref(0)   
provide(/* 注入名 */ 'num', /* 值 */ count)
const tailNum = ()=>{
   count.value++
} 
</script>

• A组件

<template>
  <div>
     这是A组件,获取到父组件信息是:{{num}}
      <B></B>
  </div>
</template>
<script setup>
  import { inject } from 'vue';
  import B from './B.vue' 
  const num = inject('num')
</script>

• B组件

<template>
    <div>
       这是B组件,获取到父父组件信息是:{{num}}
    </div>
  </template>
  <script setup> 
  import { inject } from 'vue';
  const num = inject('num')
  </script>