编写项目过程中，我们会使用props进行父子组件的传值，但是如果组件层级比较复杂，那么就需要依赖注入解决这个问题。

第一步 引入provide，inject

import {provide ,inject} from "vue"

1、provide

provide可以提供一个值，可以被后代组件注入，他是一个后代组件依赖的提供人

// root.vue
import { provide } from "vue";

provide("data", {
  name: "cat",
  age: 18,
});

 2、inject

inject用于接收provide声明的值

// chlid.vue
import { inject } from "vue";
const data = inject("data");

console.log(data);

// { name: "cat", age: 18}

如果父组件没有为我们提供值，我们可以为inject默认值

// chlid.vue
import { inject } from "vue";
const data = inject("data", {
  name: "cat",
  age: 18,
});

console.log(data);
// log
// { name: "cat", age: 18 }

 3、如何确保provide提供的key保持唯一性呢？我们不能确保每位开发人员都使用不同的变量命名？我们使用ES6的symbol唯一值

// root.vue
import { provide } from "vue";
export const dataSymbol=Symbol()

provide(dataSymbol, {
  name: "cat",
  age: 18,
});

// child.vue
import { inject } from "vue";

const data = inject(dataSymbol, {
  name: "cat",
  age: 18,
});

4、提供的数据也可以是响应式的

// root.vue
import { provide，ref} from "vue";
const data=ref({
name:cat,
age:18
})
provide(data.value)

5、也可以提供方法

// root.vue
import { ref, provide } from "vue";


const log= () => {
  console.log("传递方法");
};

provide(log);

// child.vue
import { inject } from "vue";
import { dataSymbol } from "../injectionSymbols";

const { log } = inject(log);

log()

还可以给传递的值添加readonly属性，那么传递的数据就不可改变了