Vue学习日记--肆

组件通信值props

父组件可以通过props将数据传递给子组件。

1. 先声明父组件的属性msg，
2. 在父组件中将msg绑定到子组件中（<Child :childData="msg"/>），
3. 在子组件中使用props接收父组件的属性（props:[‘childData’]）。

此时接收到的数据可以为子组件使用。

  <script type="text/javascript">
        //全局组件
        Vue.component('Child',{
    
    
            template:'<div>' +
            '<p> 子组件:{
    
    {childData}}</p>' +
            '</div>',
            props:['childData']
        });
        Vue.component('Parent',{
    
    
            data:function(){
    
    
                return{
    
    
                    msg:'我是父组件数据'
                }
            },
            template:'<div>' +
            '<p> 父组件</p>' +
            '<Child :childData="msg"/>' +//msg被传到子组件中
            '</div>'
        });

        new Vue({
    
    
            el:'#app',
            template:'<div><Parent/>' +
            '</div>'
        });

效过如下：

学无止境，持续更新。