vue3 祖孙组件传值

最新推荐文章于 2024-09-27 16:00:05 发布

乙火

最新推荐文章于 2024-09-27 16:00:05 发布

阅读量957

点赞数

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

本文链接：https://blog.csdn.net/tianchoy/article/details/124538325

版权

vue 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

这篇博客详细介绍了在Vue.js中如何使用provide和inject实现祖孙组件之间的值传递。祖组件通过provide暴露出`info`对象和`toSun`方法，子组件不进行任何操作，而孙组件则通过inject接收到这些属性和方法，并在按钮点击事件中修改`info`的age属性并调用`toSun`方法通知父组件更新。

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

使用provide和inject 的方式让祖孙组件之间传值
祖组件：

<script setup lang='ts'>
import { provide, reactive } from "vue";
import Son from "./Son.vue";

const info = reactive({
    name:'ccc',
    age:10
})

provide("info",info)

const toSun=(value:number)=>{
    console.log('获取孙组件的值',value)
}

provide('toSun',toSun)

</script>
           
<template>
    <div class="box">
        <p>父组件--{{info.age}}</p>
        <Son />
    </div>
</template>
           
<style scoped lang='scss'>
</style>

子组件

<script setup lang='ts'>
import Grandson from './Grandson.vue';

</script>
           
<template>
    <div>
        <p>子组件</p>
        <Grandson />
    </div>
</template>
           
<style scoped lang='scss'>

</style>

孙组件

<script setup lang='ts'>
import { inject } from "vue";

type obj = {
    name:string,
    age:number
}

let info = inject("info") as obj

let toSun = inject("toSun") as Function

const change=()=>{
    info.age ++ 
    toSun(info.age)
}


</script>
           
<template>
    <div>
        <p>孙组件--{{info.name}}--{{info.age}}</p>
        <button @click="change">btn</button>
    </div>
</template>
           
<style scoped lang='scss'>

</style>