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

最新推荐文章于 2022-08-20 08:00:00 发布

weixin_33890526

最新推荐文章于 2022-08-20 08:00:00 发布

阅读量1.1k

点赞数

文章标签： javascript 前端设计模式 ViewUI

原文链接：http://www.cnblogs.com/alettarit/p/10829062.html

版权

父组件向子组件通信

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

解决方案

起初我是父组件通过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

1	`<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 
         
          } 
         
          } 
         
          },


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