【vue】provide inject 多层嵌套传值

最新推荐文章于 2024-10-05 12:45:13 发布

歌声缓缓

最新推荐文章于 2024-10-05 12:45:13 发布

阅读量224

点赞数

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

本文链接：https://blog.youkuaiyun.com/weixin_43444977/article/details/129780335

版权

vue 专栏收录该内容

16 篇文章

订阅专栏

文章展示了Vue.js中祖父组件如何使用provide/inject来向孙子组件传递数据。在`grandpa`组件中设置了`provide`，在`father`和`grandson`组件中通过`inject`接收并打印了传递的`username`值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

grandpa

<template>
    <div>
        grandpa
        <father></father>
    </div>
</template>

<script>
    import father from './father'
    export default {
        name: "grandpa",
        components:{
            father
        },
        provide(){
            return{
                username:'zz'
            }
        }
    }
</script>

<style scoped>

</style>

father

<template>
    <div>
        <grandson></grandson>
    </div>
</template>

<script>
    import grandson from './grandson'
    export default {
        name: "father",
        components: {grandson}
    }
</script>

<style scoped>

</style>

grandson

<template>
    <div>
        grandson
    </div>
</template>

<script>
    export default {
        name: "grandson",
        inject:["username"],
        mounted(){
            console.log(this.username) //zz
        }
    }
</script>

<style scoped>

</style>