Vue组件化--祖先给后代传值

祖先给后代传值

由于嵌套层数过多， 传递props不切实际，vue提供了 provide/inject API完成该任务

• provide/inject: 能够实现祖先给后代传值

// 父 home
<template>
    <div class="home">
        <HelloWorld msg="Welcome to Your Vue.js App"/>
    </div>
</template>

<script>
    import HelloWorld from "@/components/HelloWorld.vue";

    export default {
        name: "Home",
        // provide: { dong: 'dong' },
        provide () {
            return { dong: this.tua }
        },
        components: { HelloWorld },
        data () {
            return {
                tua: 'tua'
            }
        }
    }
</script>

// 子 home
<template>
    <div class="hello">
        <h1>{{ msg }}</h1>
        {{ dong }}
    </div>
</template>

<script>
    export default {
        name: "HelloWorld",
        inject: ['dong'],
        props: { msg: String }
    }
</script>

注意：provide和inject主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。我们更多会在开源组件库中见到。

但是，反过来想要后代给祖先传值这种方案就不行了