Vue父子组件传值

父组件向子组件传值

一、在子组件上动态绑定一个属性(v-bind:Pmsg=“msg”)，重新定义一个变量(Pmsg)，用来接收父组件的数据。
二、将子组件模板中需要展示数据的标签替换成步骤一中定义的数据
（template:‘

我是子组件–{{Pmsg}}

’,）。
三、在子组件中用props来接收这个数据。
（ props:[‘Pmsg’]）

<div id="app">
     
    <son v-bind:Pmsg="msg"></son>

    </div>
    <script>
       
        // 创建一个Vue实例
        var vm =new Vue({
            el:'#app',
            data:{
              msg:'我是父组件data中的数据'
            },
            methods:{
                
            },
            components:{
                son:{
                    template:'<h1>我是子组件--{{Pmsg}}</h1>',
                    props:['Pmsg']
                }
            }
          
           

        });
    </script>

子组件data中的数据和props中数据的区别

一、data是子组件私有的数据，props是父组件传过来的数据。
二、data是可读可修改的数据，props中的数据是只读的，不允许被修改。