【vue】provide inject 多层嵌套传值

最新推荐文章于 2024-04-27 11:01:24 发布

歌声缓缓

最新推荐文章于 2024-04-27 11:01:24 发布

阅读量118

点赞数

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

本文链接：https://blog.csdn.net/weixin_43444977/article/details/129780335

版权

vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

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>