vue父组件触发事件改变子组件的值的方法实例详解
更新时间：2019年05月07日 14:32:20 作者：听风语
这篇文章主要介绍了vue父组件触发事件改变子组件的值的实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
父组件向子组件通信
业务场景：现在我要在父组件点击一个回退按钮，这个回退会传进子组件中（子组件中有两步进程），子组件来处理。
解决方案
起初我是父组件通过props传值，但是发现只有组件第一次加载时才能传值，通过事件改变的父组件值并不会再通过过props传递，也就是说props只有加载组件时才会工作，并不会根据值改变动态操作
后面，我是通过操作dom的方法，this.$refs.children这样直接操作子组件
<ProgressTwo ref="progressTwo" v-else-if="progress==2" @second="recordProgress"></ProgressTwo> //这是子组件
goSecond: function(){ //这是操作子组件的方法
this.$refs.progressTwo.second = true
this.second = false
}
注释：其实我们一直被父子组件概念束缚了，子组件就是相当于一个被包裹的div，只是那个div里有很多标签而已，或者可以理解为我们在父组件里用iframe嵌套了一个页面，这个页面是子组件（这是帮助理解的粗话）
现在讲讲父子组件通信
父组件向子组件传值
父组件
html
<div> <NotFound v-else :searchThing="search"></NotFound> //search是父组件要传的值 </div>
子组件
在script中拿值
props:{
searchThing: String //也可以给它一个默认值 （defaultAddress: {Type: Object,default:()=> 'default'}）
},
子组件向父组件传值
通过发射函数
子组件
在script中通过函数告诉父组件
gotoPay: function(){
this.$emit('second',data) //data是你要向父组件传的值（可传可不传看需求）
}
父组件
html
<ProgressTwo ref="progressTwo" v-else-if="progress==2" @second="recordProgress"></ProgressTwo>
script
父组件通过自定义的second事件监听子组件的发射
recordProgress: function(val){ //val用于接收子组件传过来的值
if(val==true){
this.second = val
}else{
if(val==false){
this.progress = 3
}else{
this.progress = 1
}
}
},
总结
以上所述是小编给大家介绍的vue父组件触发事件改变子组件的值的方法实例详解，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
相关文章
今天小编就为大家分享一篇vue动态禁用控件绑定disable的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
这篇文章主要介绍了vue2项目中全局封装axios问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
这篇文章主要介绍了vue+mousemove实现鼠标拖动功能，文中给大家介绍了鼠标移动过快拖动就失效问题的解决方法,需要的朋友可以参考下2018-08-08
今天小编就为大家分享一篇vue实现跳转接口push 转场动画示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要为大家详细介绍了vue实现楼层跳转效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
在vue项目中父子组件间的通讯很方便,但兄弟组件或多层嵌套组件间的通讯,就会比较麻烦,这时使用eventBus通讯,就可以很便捷的解决这个问题,这篇文章主要给大家介绍了关于Vue中事件总线(eventBus)使用的相关资料,需要的朋友可以参考下2022-03-03
vue里使用create,mounted调用方法的正确姿势说明
这篇文章主要介绍了vue里使用create,mounted调用方法的正确姿势，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要为大家详细介绍了vue+echarts实现条纹柱状横向图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要为大家详细介绍了vue3.x 使用jsplumb实现拖拽连线，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
Vue表单校验validate和validateField的使用及区别详解
validateField 和 validate 都可以用于表单验证,但是它们的作用有所不同,下面这篇文章主要给大家介绍了关于Vue表单校验validate和validateField的使用及区别的相关资料,需要的朋友可以参考下2024-04-04
最新评论