祖页面
<template>
<Eee></Eee>
</template>
<script setup lang="ts">
import Eee from '@/components/Eee.vue';
import {provide, reactive,ref } from "vue";
// provide 用于祖孙间传递数据 父组件以 provide或ref 定义字段初始值
// 子组件以 inject接收
let Enum =ref(100);
let Enum2= reactive({val:200});
provide('changeNum2',Enum2)
provide('changeNum',Enum)
</script>
孙页面
<template>
<div>
<h4>依赖注入</h4>
<button @click="btn">改</button>
</div>
</template>
<script lang='ts' setup>
import { inject } from 'vue';
const Enum = inject('changeNum');
const Enum2 = inject('changeNum2');
console.log('Enum', Enum)
console.log('Enum2', Enum2)
const btn = () => {
Enum.value = 111;
//此处的Enum 下波浪标红由ts 不支持vue3 .value 写法引起,可删除 lang ='ts' 处理
console.log('Enum改动后', Enum)
}
</script>