vue子父组件通信的实现代码
更新时间：2017年07月09日 17:27:44 作者：sunflower-zy
这篇文章主要介绍了vue子父组件通信的实现代码，非常不错，具有参考借鉴价值，需要的朋友参考下吧
之前在用vue写子父组件通信的时候，老是遇到问题！！！
子组件传值给父组件：
子组件：通过emit方法给父组件传值，这里的upparent是父组件要定义的方法
模板：
<div v-on:click="switchViewBtn">切换视图</div>
在data中定义：switchStatus = true;
方法：
switchViewBtn(){
let that=this;
this.$emit("parentView",that.switchStatus);
},
父组件：模板：
<div @parentView="changeView" :msg="msg"></div>
方法：
changeView(msg){
this.switchStatus = msg;
}
这样就可以将子组件的值传给父组件了。
父组件传值给子组件：
父组件：模板：
<div :name="name">切换视图</div>
在data中赋值：
export default {
data() {
return {
data：‘zy'
}
}
}
子组件中接受代码：
export default {
data() {
return {
data：‘zy'
}
}，
props:[
'name'
]
}
以上所述是小编给大家介绍的vue子父组件通信的实现代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
相关文章
组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。这篇文章主要介绍了vue组件间通信六种方式,需要的朋友可以参考下2019-05-05
这篇文章主要介绍了使用vue-router切换组件时使组件不销毁问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
vue中监控滚动事件可以直接在mounted中绑定滚动事件,然后在销毁前解绑滚动事件,本文通过实例代码介绍vue实现滚动底部加载下一页指令的过程,感兴趣的朋友跟随小编一起看看吧2023-10-10
这篇文章主要通过示例和大家一起浅析一下Vue3的响应式原理，文中的示例代码讲解详细，对我们学习Vue3有一定帮助，需要的可以参考一下2022-08-08
这篇文章主要介绍了vue中使用vue-print.js实现多页打印，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
今天小编就为大家分享一篇vue 解决异步数据更新问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
这篇文章主要介绍了Vue.js 父子组件通讯开发实例的相关资料,本文介绍的非常详细，具有参考借鉴价值，需要的朋友可以参考下2016-09-09
这篇文章主要为大家详细介绍了vue如何实现observer和watcher源码的相关资料，分析vue的observe实现源码，聊聊如何一步一步实现$watch，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
这篇文章主要介绍了vue项目中使用pinyin转换插件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了计算属性和侦听器，文章以介绍计算属性、侦听器的相关资料展开详细内容,需要的朋友可以参考一下，希望对你有所帮助2021-11-11
最新评论