inject需要在vue3中才支持

Props

Props传递是逐级的，时常会产生太深层的树而导致传递不清晰

Provide/inject

Provide/inject可以解决这个问题， 整个过程有两方： 提供者和注入者 提供者： 声明变量以及注入者需要更改的方法

Provide

Provide接受两个参数：注入名， 注入对象（可以是变量，可以是对象，也可是响应式对象） 响应式对象被注入时不会被解包，以此维系响应

<!--提供者组件-->
<template>
  <children-comp/>
</template>

<script setup>
import {provide, ref} from "vue";
import ChildrenComp from "@/components/childrenComp.vue";

// 注入子组件
const location = ref('North Pole')
const updatedLocation = () => {
  location.value = 'South North'
}
provide('location', {
  location,
  updatedLocation
})
</script>

// 注入者组件
<template>
  <button @click="updatedLocation">
    {{location}}
  </button>
  <grand-child-comp/>
</template>

<script setup>
import {inject} from 'vue'
import GrandChildComp from "@/components/grandChildComp.vue";
const {location, updatedLocation} = inject('location')
</script>

如果不想被注入方更改：readonly

import {readonly} from 'vue';
provide('injectName', readOnly(name))

如果正在构建大型应用：symbol

// keys.js
export const myInjectionKey = Symbol()

// 提供者组件
import {myInjectionKey} from './key.js'

// 注入方组件
import { inject } from 'vue'
import { myInjectionKey } from './keys.js'
const injected = inject(myInjectionKey)