父组件provide(‘stateCenter’, state)提供数据
<template>
<div class="App">
<label>
<input type="radio" v-model="colorVal" value="red" name="color">
红色
</label>
<label>
<input type="radio" v-model="colorVal" value="pink" name="color">
粉色
</label>
<label>
<input type="radio" v-model="colorVal" value="yellow" name="color">
黄色
</label>
<div class="box"> {{ colorVal }}
</div>
<A></A>
</div>
</template>
<script setup lang='ts'>
import { provide, ref, reactive, toRefs } from 'vue'
import A from './A.vue'
const state = reactive({
colorVal: 'pink',
ruleForm: {
username: "",
password: "",
},
});
provide('stateCenter', state)
let { colorVal } = toRefs(state);
</script>
<style></style>
子组件inject接收数据
<template>
<h1>A.vue (子级别)</h1>
<div class="box">{{ stateCenter.colorVal }}</div>
<B></B>
</template>
<script setup lang='ts'>
import { inject, Ref, ref } from 'vue'
import B from './B.vue'
const stateCenter = inject<any>('stateCenter')
</script>
<style>
.box {
width: 50px;
height: 50px;
border: 1px solid #ccc;
}
</style>
-----------------------------------------------------------------------------------------------------------------------------
孙子组件接收数据
```javascript
```<template>
<h1>B.vue (孙子级别)</h1>
<div class="box">{{ stateCenter.colorVal }}</div>
<button @click="change">孙子修改</button>
</template>
<script setup lang='ts'>
import { inject, Ref, ref } from 'vue'
const stateCenter = inject<any>('stateCenter')
const change = () => {
stateCenter.colorVal! = 'yellow'
}
</script>
<style>
.box {
width: 50px;
height: 50px;
border: 1px solid #ccc;
}
</style>