vue中父组件向子组件传值
时间：2020-01-09 19:08:43
收藏：0
阅读：83
<div id="app">
{{msg}}
<logn v-bind:fuzujian="msg" ></logn> app控制的区域为父组件 logn为私有的子组件
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
msg:"这是父组件的内容"
},
methods: {},
components:{
data(){
return{
info:"<h1 >这是私有组件的data值</h1>",
name:"aaaa"
}
},
‘logn‘:{
// 自组件想要拿到父组件的值，就要使用props进行接受
template:‘<h1 @click="change">这是私有组件--{{fuzujian}}</h1>‘,
props:[‘fuzujian‘],
methods: {
change(){
this.fuzujian="啊啊啊"
}
},
},
}
})
</script>
总结：1、子组件想要获取父组件的data值，要在父组件控制区域的组件标签中添加一个属性，该属性就等于，你想要看到的父组件的data值，，例子中 <logn v-bind:fuzujian="msg" ></logn>
2、在子组件中使用props：[‘fuzujian‘] .用来接受定义的属性
3、在子组件的template，模板字符串上面，将接受过来的属性使用{{fuzujian}}，就可以进行展示
4、子组件可以修改自己data里面的数据（自组件的data必须是一个函数，并且return一个对象），对于接受过来的父组件的data值只能进行查看（尽管可以进行修改，但是控制台会报错，建议修改）
评论（0）