码迷,mamicode.com
首页 > Web开发 > 详细

vue.js(18)--父组件向子组件传值

时间:2019-08-18 17:30:08      阅读:98      评论:0      收藏:0      [点我收藏+]

标签:绑定   com   个数   一个   直接   属性   color   turn   传递   

子组件是不能直接使用父组件中数据的,需要进行属性绑定(v-bind:自定义属性名=“msg”),绑定后需要在子组件中使用props[‘自定义属性名’]数组来定义父组件的自定义名称。

props数组中的数据是只读的,父组件中的data是可读可写的。

子组件自己的data,子组件可直接访问,与父组件无关。

<div class="app">
        <mycom1 v-bind:mymsg="msg"></mycom1>
        <!-- 子组件想要使用父组件中的数据时,需要通过在父组件上进行属性绑定(v-bind),
            才能拿到父组件上的数据 -->
    </div>
    <template id="cmp1">
        <div>
            <h1>
                我是子一个组件+++我是父组件中的data通过props传递{{mymsg}}
            </h1>
            <h1>我是子组件中的data:{{mymsg1}}</h1>
        </div>
    </template>
    <script>
        var vm = new Vue({
        el:.app,
        data:{
            msg:hahahah
        },
        components:{
            mycom1:{
                template:#cmp1,
                props:[mymsg],//props是一个数组,用来定义属性绑定的父组件的数据,定义后才能使用
                data() {//props中的数据是只读的,data中的数据是可读可写的
                    return{
                        mymsg1:heheheheeh
                    }//这里的data是子组件自己的数据,子组件可以直接访问,与父组件无关
                }
            }
        }
    })  
    </script>

 

vue.js(18)--父组件向子组件传值

标签:绑定   com   个数   一个   直接   属性   color   turn   传递   

原文地址:https://www.cnblogs.com/qiqisusu/p/11372916.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!