vue3学习教程第十一节（依赖注入：provide/inject父子传参）

本机介绍：provide/inject
注意：大家在看此小节时候，默认大家已经了解一些组件的使用方法

1、依赖注入的用途：

当嵌套层级多的时候，某个子组件需要较远层级的父组件数据时候，如果我们依然使用props 传递数据，那么父组件的层级会越来越深，代码也会越来越复杂，这个传输的链路太长，如果中间出现差错，不容易排查。这时候就可以使用provide 和 inject 来解决这个问题。
如图：

而当我们使用provide 和 inject 的时候，就可以像下面这样使用：
一个父组件可以为所有的后代组件提供数据依赖，任何后代无论层级多么深，都可以注入由父组件提供给链路的依赖。

2、依赖注入固定值及响应数据

如下代码实现：vue2中

固定值的时候是非响应式的
如图：

注意：vue2中provide和inject 注入依赖孙子组件中的数据是非响应式的；
如果响应实现响应式，需要使用

<template>
<div class="par">
  <h3>provide--inject</h3>
  父组件--pName:{{ msg }}
  <h3>provide--inject</h3>
 
  <Provide></Provide>
  <button @click="handleChangeName">change name</button>
  </div>
</template>
<script>
import Provide from './components/provide1.vue'
import { computed } from 'vue'
export default {
  name: 'App',
  components: {
    Provide
  },
  provide(){
    return {
      // pName: 'Andy' // 固定值；此时的pName是非响应式的
      pName: computed(() => this.msg) // 传入计算属性，再次更改msg的值，会发现孙子组件里面的值同步更新了，此时的pName是响应式的
    }
  },
  data() {
    return {
      msg: 'Welcome Andy'
    }
  },
  created() {
    console.log('app created')
  },
  methods: {
    handleChangeName() {
      this.msg = 'Andy1'
      console.log('==handleChangeName==', this.msg)
    }
  }
}

// 子组件：

<template>
  <div class="provide1">
    <div>provide1</div>
    <ProvideS></ProvideS>
  </div>
</template>
<script>
import ProvideS from './provide11.vue'
export default {
  name: 'ProvideM',
  components: {
    ProvideS
  }
}
</script>

// 孙子组件

<template>
<div class="provide11">
  pName：{{pName}}
</div>
</template>
<script>
export default {
  name: 'ProvideMy',
  components: {},
  props: {},
  inject: ['pName'],
}
</script>

如图：

3、注入别名以及默认值
当后代组件中有注入时候，父级组件中需要有同名的属性名依赖，否则运行会报错；如果父级组件中不想依赖该属性名，那么后代组件中就需要有默认值，否则运行会报错。

为什么要使用依赖别名呢？
因为当我们需要依赖多个属性，或者页面结构复杂时候，我们要避免依赖的属性名与data的属性名冲突，或者是（vue3 setup 中声明的变量重名）此时就可以使用依赖别名。

<template>
<div class="provide11">
  pName：{{pName}}；
  <br>
  name: {{ name }}
</div>
</template>
<script>
export default {
  name: 'ProvideMy',
  components: {},
  props: {},
  // inject: ['pName'],
  inject: {
    name: { // name 代表的是 pName 的别名
      from: 'pName', // from代表父组件依赖的属性名称
      default: 'pName 的默认值'
    }
  },
  computed: {},
  data() {
    return {
    }
  }
}
</script>

如图：

4、孙子组件响应式更改依赖属性值

当我们想在孙子组件中更改父组件的属性是，可以在注入属性的值的同时，注入一个回调函数如下：

vue3中

父组件

<template>
<div class="par">
  <h3>provide--inject</h3>
  父组件--pName:{{ msg }}
  <h3>provide--inject</h3>
 
  <Provide></Provide>
  <button @click="handleChangeName">父组件change name</button>
  </div>
</template>
<script setup>
import Provide from './components/provide1.vue'
import { ref, provide, inject } from 'vue'
let msg = ref('Andy start')

const handleChangeName = () => {
  msg.value = 'Andy change'
}
const sChangeName = () => {
  msg.value = 'Andy sChangeName'
}
provide('pName', {msg, sChangeName})
</script>

子组件

<template>
  <div class="provide1">
    <div>provide1</div>
    <ProvideS></ProvideS>
  </div>
</template>
<script setup>
import ProvideS from './provide11.vue'

</script>

孙子组件

<template>
<div class="provide11">
  msg---:{{msg}}；
  <br>
  <br>
  <button @click="sChangeName">孙子组件事件</button>
</div>
</template>
<script setup>
import { computed, provide, ref, inject } from 'vue'
const { msg, sChangeName } = inject('pName')
</script>

如图：
初始值：

父组件点击更新

孙子组件点击更新

5、使用Symbol做唯一的键名

在大型应用中，为了避免属性名的冲突，我们可以使用Symbol类型来作为注入的的键名

比如 const myProvide = Symbol()

使用如下

<template>
<div class="par">
  <h3>provide--inject</h3>
  父组件--pName:{{ msg }}
  <h3>provide--inject</h3>
 
  <Provide></Provide>
  <button @click="handleChangeName">父组件change name</button>
  </div>
</template>
<script setup>
import Provide from './components/provide1.vue'
import { ref, provide, inject } from 'vue'
const myProvide = Symbol()
let msg = ref('Andy start')
provide(myProvide, {msg}) // 此处依赖的键名更改为myProvide
</script>

6、我们还可以在应用的最外层注入，比如在main.js | main.ts中

这样在应用的任何一个组件中都可以使用myProvide依赖
以vue3为例：

<script setup>
import { createApp, povide } from 'vue'
import App from './App.vue' // 引入App.vue
const app = createApp(App)

app.provide('myProvide', '测试')
app.mount('#app')
</script>

最后：
1、vue2中的注入依赖是默认是非响应式的，若想要实现响应式，需要结合computed回调函数使用；
2、vue3中的注入依赖是默认是响应式的，即使通过解构 const { msg, sChangeName } = inject('pName')，由ref创建的对象，依然是响应式的，相比较而言，大家可以直接使用vue3 setup语法糖的写法，若要使用setup() {} 回调函数的写法，需要同步更新依赖provide的属性值，否则依赖的属性值不会更新。