好资源导航 » 文章资讯 » vue子父组件通信的实现代码

vue子父组件通信的实现代码

2024-02-16 16:30:04 74

之前在用vue写子父组件通信的时候，老是遇到问题！！！

子组件传值给父组件：

子组件：通过emit方法给父组件传值，这里的upparent是父组件要定义的方法

模板：

切换视图

在data中定义：switchStatus=true;

方法：

switchViewBtn(){
letthat=this;
this.$emit("parentView",that.switchStatus);
},

父组件：模板：

方法：

changeView(msg){
this.switchStatus=msg;
}

这样就可以将子组件的值传给父组件了。

父组件传值给子组件：

父组件：模板：

切换视图

在data中赋值：

exportdefault{
data(){
return{
data：‘zy'
}
}
}

子组件中接受代码：

exportdefault{
data(){
return{
data：‘zy'
}
}，
props:[
'name'
]
}

以上所述是小编给大家介绍的vue子父组件通信的实现代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！