父子组件传值——静态传值、动态传值

最新推荐文章于 2024-06-18 09:00:43 发布

锋璠

最新推荐文章于 2024-06-18 09:00:43 发布

阅读量782

点赞数

分类专栏： Svn

本文链接：https://blog.csdn.net/weixin_42263618/article/details/107141902

版权

Svn 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

静态传值

我们在在vue中写一个子组件，并设置 props，props是一个数组，可以存多个值，每个值都相当于一个属性，所以当我们需要向子组件传值的时候可以在组件标签中直接设置响应属性的值。

<body>
    <div id="app">
        <!--静态传值-->
        <com1 parentmsg="My journey with Vue"></com1>
    </div>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
            },
            methods:{
            },
            components:{
                //结论：子组件中，默认无法访问到 父组件中的data上的数据和methods中的方法
                com1:{
                    template:'<h1>这是子组件---{{parentmsg}}</h1>',
                    //注意：组件中的所有props中的数据，都是通过父组件传递给子组件的
                    //props中的数据，都是只读的，无法重新赋值
                    props:['parentmsg']//把父组件传递过来的 parentmsg属性，先在props数组中，定义一下
                    //这样，才能使用这个数据
                }
            }
        })
    </script>
</body>

动态传值

<body>
    <div id="app">
        <!--父组件，可以在引用组件的时候，通过属性绑定（v-bind) 的形式，把 需要传递给子组件的数据
        以属性绑定的形式，传递到子组件内部，供子组件使用
        -->
        <!--动态传值-->
        <com1 v-bind:parentmsg="msg">   
        </com1>
    </div>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                msg:'123 父组件中的数据'
            },
            methods:{

            },
            components:{
                //结论：子组件中，默认无法访问到 父组件中的data上的数据和methods中的方法
                com1:{
                    template:'<h1>这是子组件---{{parentmsg}}</h1>',
                    //注意：组件中的所有props中的数据，都是通过父组件传递给子组件的
                    //props中的数据，都是只读的，无法重新赋值
                    props:['parentmsg']//把父组件传递过来的 parentmsg属性，先在props数组中，定义一下
                    //这样，才能使用这个数据
                }
            }
        })
    </script>
</body>

锋璠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
父子组件传值——静态传值、动态传值

静态传值我们在在vue中写一个子组件，并设置 props，props是一个数组，可以存多个值，每个值都相当于一个属性，所以当我们需要向子组件传值的时候可以在组件标签中直接设置响应属性的值。<body> <div id="app">  <com1 parentmsg="My journey with Vue"></com1> </div> <scrip
复制链接

扫一扫

专栏目录