父组件向子组件传值
一、在子组件上动态绑定一个属性(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中的数据是只读的,不允许被修改。