网站首页 Vue 正文

vue 多层嵌套组件的传值

作者：一染星辰更新时间： 2021-12-06 Vue

思路：

思路是什么呢！！！

vue 提供了 provide和inject 帮助了我们解决多层嵌套问题

在provide 中指定要传递给子孙组件的数组，子组件通过inject注入祖父组件传递过来的数据

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div class="app">
        <aa></aa>
    </div>

    <script>
        //多层嵌套组件的传值是如何做的
        //思路是什莫？
        //vue 提供了 provide和inject 帮助了我们解决多层嵌套问题
        //在provide 中指定要传递给子孙组件的数组，子组件通过inject注入祖父组件传递过来的数据
        let aa = {
            template: `
    <div>
    我是aa组件
    <bb></bb>
</div>
    `,

            //  上面拼接完毕后，要使用法宝 provide 传递给子孙组件的数组

            provide: {
                phone: "18822686826",
                name: "神仙派来的",
                age: 18,
            },
        }

        Vue.component("bb", {
            template: ` <div>
    我是cc组件
    <cc></cc>
</div>
            `,

            //继宗师的儿子也要往下传
            //也要使用法宝provide
            //指定要传给子孙的组件
            provide: {
                phone: "666",
                name: "李德生",
                age: 999,
            }

        })
        //当传家宝的途径找到了以后，今生可能可以传输到cc孙手里
        //用template 造孩子
        Vue.component("cc", {
            template: `
          <div>
    我是cc组件
    <ddd></ddd>
</div>
        `,
        })
        //重新定义一个
        Vue.component("ddd", {
            //造孩子
            template: `
               <div>
    我是dd组件
    {{phone}}----{{name}}
</div>
            `,

            //上法宝  inject
            //子孙需要inject 注入祖父传来的数据
            inject: ["phone", "name", "age"]
        })









        //不管条件如何？第一步就是创建容器
        let app = new Vue({
            el: ".app",
            data: {},
            components: {
                aa: aa,
            }
        })











    </script>












</body>

</html>

原文链接：https://blog.csdn.net/weixin_59519449/article/details/122114299

上一篇：VUE-Eliment-Table使用行点击事件
下一篇：PageOffice在前后端分离(如:Vue)中调用示例前

网站首页 Vue 正文

vue 多层嵌套组件的传值

相关推荐