本章將介紹到的是Vue3.x中的provide和inject，他們的使用時成組合使用，用于從父級組件向下級的子組件，孫組件傳遞值。

1、概述：實現(xiàn)嵌套組件樹形數(shù)據(jù)傳遞與接收。
2、使用：由vue提供，按需引入：import { provide, inject } from 'vue';
3、用例：

import { provide, inject } from 'vue'
// 父組件注入
const component = {
  setup() {
    provide('name', 'zhagn_san');
    // 如果是需要注入多個值則重復(fù)使用provide即可
  };
};
// 子組件接收
const children = {
  setup() {
    // inject的第二個參數(shù)為沒有接收到注入的數(shù)據(jù)時的默認(rèn)返回值，如果沒有，則返回undefined
    const user = inject('name', 'li_si');
    // 需要接收多個注入的值也是重復(fù)使用inject即可
    return { user };
  };
};

4、實例：再實際使用過程中，往往我們需要將注入的值實現(xiàn)響應(yīng)式變化，則需要注入響應(yīng)式

// 父組件注入
const component = {
  setup() {
    const user = reactive({ name: 'zhagn_san', age: 20 });
    provide('user', user);
  };
};
// 子組件接收后，如果父組件中的user發(fā)生了改變，則子組件中也會發(fā)生響應(yīng)式變化
const children = {
  setup() {
    const user = inject('user', {});
    return { user };
  };
};

5、注意：不建議在注入時對響應(yīng)式變量進(jìn)行改變（在子組件中改變注入的值），因為此操作會改變Vue的單向數(shù)據(jù)流。建議采用注入改變其值的方法來對響應(yīng)式變量進(jìn)行改變。

import { reactive, provide, inject } from 'vue'
// 父組件注入
const component = {
  setup() {
    const user = reactive({ name: 'zhagn_san', age: 20 });
    function changeHandler() {
        user.age = 30;
    }
    provide('user', user);
   provide('changeHandler', changeHandler);
  };
};
// 子組件接收后，通過調(diào)用注入的方法來對響應(yīng)式變量進(jìn)行改變
const children = {
  setup() {
    const user = inject('user', {});
    const changeHandler = inject('changeHandler');
    return { user, changeHandler };
  };
};

下一章：（十一）template和ref獲取元素或組件實例
上一章：（九）Vue3.x生命周期

ps：列位，千萬別高估自己在別人心中的地位，因為那樣會讓自己尷尬，出丑！