vue3 provide和inject传参

最新推荐文章于 2025-10-19 17:13:43 发布

原创最新推荐文章于 2025-10-19 17:13:43 发布 · 187 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

该文展示了在Vue中如何通过provide和inject实现跨组件层级的数据传递，从父组件提供stateCenter对象，包含colorVal属性，到子组件和孙子组件通过inject接收并修改colorVal值，实现了状态在组件树中的管理。

父组件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>