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'