vue父组件触发事件改变子组件的值的方法实例详解

冷不防 2021-12-20 03:37 274阅读 0赞

父组件向子组件通信

业务场景:现在我要在父组件点击一个回退按钮,这个回退会传进子组件中(子组件中有两步进程),子组件来处理。

解决方案

起初我是父组件通过props传值,但是发现只有组件第一次加载时才能传值,通过事件改变的父组件值并不会再通过过props传递,也就是说props只有加载组件时才会工作,并不会根据值改变动态操作

后面,我是通过操作dom的方法,this.$refs.children这样直接操作子组件

?










1


2


3


4


5



<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

?










1


2


3



<div>


  
<NotFound v-
else
:searchThing=
“search”
></NotFound>
//search是父组件要传的值


</div>

子组件

在script中拿值

?










1


2


3



props:{


  
searchThing: String 
//也可以给它一个默认值 (defaultAddress: {Type: Object,default:()=> ‘default’})


},

子组件向父组件传值

通过发射函数

子组件

在script中通过函数告诉父组件

?










1


2


3



gotoPay:
function
(){


  
this
.$emit(
‘second’
,data)
//data是你要向父组件传的值(可传可不传看需求)


}

父组件

html

?










1



<ProgressTwo ref=
“progressTwo”
v-
else
-
if
=
“progress==2”
@second=
“recordProgress”
></ProgressTwo>

script

父组件通过自定义的second事件监听子组件的发射

?










1


2


3


4


5


6


7


8


9


10


11



recordProgress:
function
(val){ 
//val用于接收子组件传过来的值


      
if
(val==
true
){


        
this
.second = val


      
}
else
{


        
if
(val==
false
){


          
this
.progress = 3


        
}
else
{


          
this
.progress = 1


        
}


      
}


    
},











































































































 
珠峰前端架构第一期VIP视频教程 attach_img  …2
vue.js仿锤子商城实战视频教程 attach_img  …2
Koa2实现电影微信公众号前后端开发视频教程  …2
渡一Web前端开发高级工程师就业班视频教程  …23
Vue全家桶+SSR+Koa2全栈开发美团网  …23
后盾 Reactnative 开发系列视频课程  …2
移动WebAPP开发之实战美团外卖视频教程  …2
智能社HTML5+css3实战优酷开发视频教程 附带实例源码  …2
妙味移动端“淘宝造物节” 3D绚酷空间VR场景应用视频教程 attach_img  …2
JQuery EasyUI入门视频教程  …2
尚硅谷h5前端开发视频  …2
React 服务器渲染原理解析与实践(同步更新)  …2
Vue技术栈开发实战视频教程
ThinkPHP5+Apicoud+vue商城APP实战视频教程
开课吧2018最新web全栈架构师课程  …2
爱前端视频课程全套 初级+中级+高级
Vue基础+进阶+实战深入浅出开发宝典视频课程 attach_img  …2
纯正商业级应用-微信小程序开发实战 attachment  …234
ReactNative技术精讲与高质量上线APP开发视频教程 attach_img  …2
某课网 - Javascript 设计模式系统讲解与应用  …2345

转载于:https://www.cnblogs.com/alettarit/p/10829062.html

发表评论

表情:
评论列表 (有 0 条评论,274人围观)

还没有评论,来说两句吧...

相关阅读