Vue3祖孙传参

LOVE_明镜

已于 2023-05-04 15:12:02 修改

阅读量231

点赞数

分类专栏： vue3 文章标签： vue.js 前端

于 2023-05-04 10:23:21 首次发布

本文链接：https://blog.csdn.net/love_mingjing/article/details/130481872

版权

vue3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了在Vue3中如何通过provide和inject实现祖孙组件之间的数据传递。示例代码展示了如何定义和修改ref及reactive包裹的变量，并在孙组件中注入和更新这些值。

摘要由CSDN通过智能技术生成

祖页面

<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>