vue 父传子,子传父
原创
©著作权归作者所有:来自51CTO博客作者wx64a52d86b9caa的原创作品,请联系作者获取转载授权,否则将追究法律责任
父组件向子组件传递值
1、在父组件的子组件的标签上绑定属性
v-bind:parentmsg="'from Parent msg'"
2、在子组件的配置项中配置props,指定属性,类型,和默认值
props:{
parentmsg:{
type:String,
default:''
},
},
3、在子组件vue文件的template显示
<h5>{{ parentmsg }}</h5>
子组件向父组件传递值
1、在子组件vue文件中,给标签绑定事件
<button @click="passMsg">走你</button>
2、在子组件的配置项中配置methods
methods:{
passMsg()
{
this.$emit('showMsg','i am from child')
}
},
3.在父组件接收
<v-child v-bind:parentmsg="'from Parent msg'" @showMsg="showMsg"></v-child>
data(){
return{
childmsg:''
}
},
methods:{
showMsg(val)
{
this.childmsg = val
}
},
4、在父组件vue template中显示
<h5>{{childmsg}}</h5>