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

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

**父组件向子组件通信**

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

**解决方案**

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

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

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>&lt;ProgressTwo ref=</code> 
      <code>"progressTwo"</code> 
      <code>v-</code> 
      <code>else</code> 
      <code>-</code> 
      <code>if</code> 
      <code>=</code> 
      <code>"progress==2"</code> 
      <code>@second=</code> 
      <code>"recordProgress"</code> 
      <code>&gt;&lt;/ProgressTwo&gt; </code> 
      <code>//这是子组件</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>goSecond: </code> 
      <code>function</code> 
      <code>(){&nbsp; </code> 
      <code>//这是操作子组件的方法</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>this</code> 
      <code>.$refs.progressTwo.second = </code> 
      <code>true</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>this</code> 
      <code>.second = </code> 
      <code>false</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

注释：其实我们一直被父子组件概念束缚了，子组件就是相当于一个被包裹的div，只是那个div里有很多标签而已，或者可以理解为我们在父组件里用iframe嵌套了一个页面，这个页面是子组件（这是帮助理解的粗话）

现在讲讲父子组件通信

**父组件向子组件传值**

父组件

html

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>&lt;div&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;NotFound v-</code> 
      <code>else</code> 
      <code>:searchThing=</code> 
      <code>"search"</code> 
      <code>&gt;&lt;/NotFound&gt; </code> 
      <code>//search是父组件要传的值</code> 
     </div> 
     <div> 
      <code>&lt;/div&gt;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

子组件

**在script中拿值**

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>props:{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>searchThing: String&nbsp; </code> 
      <code>//也可以给它一个默认值 （defaultAddress: {Type: Object,default:()=&gt; 'default'}）</code> 
     </div> 
     <div> 
      <code>},</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

**子组件向父组件传值**

通过发射函数

子组件

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

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>gotoPay: </code> 
      <code>function</code> 
      <code>(){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>this</code> 
      <code>.$emit(</code> 
      <code>'second'</code> 
      <code>,data) </code> 
      <code>//data是你要向父组件传的值（可传可不传看需求）</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

**父组件**

html

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>&lt;ProgressTwo ref=</code> 
      <code>"progressTwo"</code> 
      <code>v-</code> 
      <code>else</code> 
      <code>-</code> 
      <code>if</code> 
      <code>=</code> 
      <code>"progress==2"</code> 
      <code>@second=</code> 
      <code>"recordProgress"</code> 
      <code>&gt;&lt;/ProgressTwo&gt;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

script

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

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>recordProgress: </code> 
      <code>function</code> 
      <code>(val){&nbsp; </code> 
      <code>//val用于接收子组件传过来的值</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>if</code> 
      <code>(val==</code> 
      <code>true</code> 
      <code>){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>this</code> 
      <code>.second = val</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
      <code>else</code> 
      <code>{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>if</code> 
      <code>(val==</code> 
      <code>false</code> 
      <code>){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>this</code> 
      <code>.progress = 3</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
      <code>else</code> 
      <code>{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>this</code> 
      <code>.progress = 1</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>},</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <th>&nbsp;</th> 
  </tr> 
 </tbody> 
 <tbody> 
  <tr> 
   <th><a title="更多操作" rel="nofollow"></a><a href="http://www.itfxz.vip/thread-3934-1-3.html" rel="nofollow">珠峰前端架构第一期VIP视频教程</a>&nbsp;<img title="图片附件" src="http://www.itfxz.vip/static/image/filetype/image_s.gif" alt="attach_img">&nbsp;<span>&nbsp;...<a href="http://www.itfxz.vip/thread-3934-2-3.html" rel="nofollow">2</a></span></th> 
  </tr> 
 </tbody> 
 <tbody> 
  <tr> 
   <th><a title="更多操作" rel="nofollow"></a><a href="http://www.itfxz.vip/thread-3933-1-3.html" rel="nofollow">vue.js仿锤子商城实战视频教程</a>&nbsp;<img title="图片附件" src="http://www.itfxz.vip/static/image/filetype/image_s.gif" alt="attach_img">&nbsp;<span>&nbsp;...<a href="http://www.itfxz.vip/thread-3933-2-3.html" rel="nofollow">2</a></span></th> 
  </tr> 
 </tbody> 
 <tbody> 
  <tr> 
   <th><a title="更多操作" rel="nofollow"></a><a href="http://www.itfxz.vip/thread-3932-1-3.html" rel="nofollow">Koa2实现电影微信公众号前后端开发视频教程</a>&nbsp;<span>&nbsp;...<a href="http://www.itfxz.vip/thread-3932-2-3.html" rel="nofollow">2</a></span></th> 
  </tr> 
 </tbody> 
 <tbody> 
  <tr> 
   <th><a title="更多操作" rel="nofollow"></a><a href="http://www.itfxz.vip/thread-3931-1-3.html" rel="nofollow">渡一Web前端开发高级工程师就业班视频教程</a>&nbsp;<span>&nbsp;...<a href="http://www.itfxz.vip/thread-3931-2-3.html" rel="nofollow">2</a><a href="http://www.itfxz.vip/thread-3931-3-3.html" rel="nofollow">3</a></span></th> 
  </tr> 
 </tbody> 
 <tbody> 
  <tr> 
   <th><a title="更多操作" rel="nofollow"></a><a href="http://www.itfxz.vip/thread-3930-1-3.html" rel="nofollow">Vue全家桶+SSR+Koa2全栈开发美团网</a>&nbsp;<span>&nbsp;...<a href="http://www.itfxz.vip/thread-3930-2-3.html" rel="nofollow">2</a><a href="http://www.itfxz.vip/thread-3930-3-3.html" rel="nofollow">3</a></span></th> 
  </tr> 
 </tbody> 
 <tbody> 
  <tr> 
   <th><a title="更多操作" rel="nofollow"></a><a href="http://www.itfxz.vip/thread-3929-1-3.html" rel="nofollow">后盾 Reactnative 开发系列视频课程</a>&nbsp;<span>&nbsp;...<a href="http://www.itfxz.vip/thread-3929-2-3.html" rel="nofollow">2</a></span></th> 
  </tr> 
 </tbody> 
 <tbody> 
  <tr> 
   <th><a title="更多操作" rel="nofollow"></a><a href="http://www.itfxz.vip/thread-3928-1-3.html" rel="nofollow">移动WebAPP开发之实战美团外卖视频教程</a>&nbsp;<span>&nbsp;...<a href="http://www.itfxz.vip/thread-3928-2-3.html" rel="nofollow">2</a></span></th> 
  </tr> 
 </tbody> 
 <tbody> 
  <tr> 
   <th><a title="更多操作" rel="nofollow"></a><a href="http://www.itfxz.vip/thread-3927-1-3.html" rel="nofollow">智能社HTML5+css3实战优酷开发视频教程 附带实例源码</a>&nbsp;<span>&nbsp;...<a href="http://www.itfxz.vip/thread-3927-2-3.html" rel="nofollow">2</a></span></th> 
  </tr> 
 </tbody> 
 <tbody> 
  <tr> 
   <th><a title="更多操作" rel="nofollow"></a><a href="http://www.itfxz.vip/thread-3926-1-3.html" rel="nofollow">妙味移动端“淘宝造物节” 3D绚酷空间VR场景应用视频教程</a>&nbsp;<img title="图片附件" src="http://www.itfxz.vip/static/image/filetype/image_s.gif" alt="attach_img">&nbsp;<span>&nbsp;...<a href="http://www.itfxz.vip/thread-3926-2-3.html" rel="nofollow">2</a></span></th> 
  </tr> 
 </tbody> 
 <tbody> 
  <tr> 
   <th><a title="更多操作" rel="nofollow"></a><a href="http://www.itfxz.vip/thread-3925-1-3.html" rel="nofollow">JQuery EasyUI入门视频教程</a>&nbsp;<span>&nbsp;...<a href="http://www.itfxz.vip/thread-3925-2-3.html" rel="nofollow">2</a></span></th> 
  </tr> 
 </tbody> 
 <tbody> 
  <tr> 
   <th><a title="更多操作" rel="nofollow"></a><a href="http://www.itfxz.vip/thread-3924-1-3.html" rel="nofollow">尚硅谷h5前端开发视频</a>&nbsp;<span>&nbsp;...<a href="http://www.itfxz.vip/thread-3924-2-3.html" rel="nofollow">2</a></span></th> 
  </tr> 
 </tbody> 
 <tbody> 
  <tr> 
   <th><a title="更多操作" rel="nofollow"></a><a href="http://www.itfxz.vip/thread-3901-1-3.html" rel="nofollow">React 服务器渲染原理解析与实践（同步更新）</a>&nbsp;<span>&nbsp;...<a href="http://www.itfxz.vip/thread-3901-2-3.html" rel="nofollow">2</a></span></th> 
  </tr> 
 </tbody> 
 <tbody> 
  <tr> 
   <th><a title="更多操作" rel="nofollow"></a><a href="http://www.itfxz.vip/thread-3895-1-3.html" rel="nofollow">Vue技术栈开发实战视频教程</a></th> 
  </tr> 
 </tbody> 
 <tbody> 
  <tr> 
   <th><a title="更多操作" rel="nofollow"></a><a href="http://www.itfxz.vip/thread-3894-1-3.html" rel="nofollow">ThinkPHP5+Apicoud+vue商城APP实战视频教程</a></th> 
  </tr> 
 </tbody> 
 <tbody> 
  <tr> 
   <th><a title="更多操作" rel="nofollow"></a><a href="http://www.itfxz.vip/thread-3884-1-3.html" rel="nofollow">开课吧2018最新web全栈架构师课程</a>&nbsp;<span>&nbsp;...<a href="http://www.itfxz.vip/thread-3884-2-3.html" rel="nofollow">2</a></span></th> 
  </tr> 
 </tbody> 
 <tbody> 
  <tr> 
   <th><a title="更多操作" rel="nofollow"></a><a href="http://www.itfxz.vip/thread-3876-1-3.html" rel="nofollow">爱前端视频课程全套 初级+中级+高级</a></th> 
  </tr> 
 </tbody> 
 <tbody> 
  <tr> 
   <th><a title="更多操作" rel="nofollow"></a><a href="http://www.itfxz.vip/thread-3863-1-3.html" rel="nofollow">Vue基础+进阶+实战深入浅出开发宝典视频课程</a>&nbsp;<img title="图片附件" src="http://www.itfxz.vip/static/image/filetype/image_s.gif" alt="attach_img">&nbsp;<span>&nbsp;...<a href="http://www.itfxz.vip/thread-3863-2-3.html" rel="nofollow">2</a></span></th> 
  </tr> 
 </tbody> 
 <tbody> 
  <tr> 
   <th><a title="更多操作" rel="nofollow"></a><a href="http://www.itfxz.vip/thread-3862-1-3.html" rel="nofollow">纯正商业级应用-微信小程序开发实战</a>&nbsp;<img title="附件" src="http://www.itfxz.vip/static/image/filetype/common.gif" alt="attachment">&nbsp;<span>&nbsp;...<a href="http://www.itfxz.vip/thread-3862-2-3.html" rel="nofollow">2</a><a href="http://www.itfxz.vip/thread-3862-3-3.html" rel="nofollow">3</a><a href="http://www.itfxz.vip/thread-3862-4-3.html" rel="nofollow">4</a></span></th> 
  </tr> 
 </tbody> 
 <tbody> 
  <tr> 
   <th><a title="更多操作" rel="nofollow"></a><a href="http://www.itfxz.vip/thread-3859-1-3.html" rel="nofollow">ReactNative技术精讲与高质量上线APP开发视频教程</a>&nbsp;<img title="图片附件" src="http://www.itfxz.vip/static/image/filetype/image_s.gif" alt="attach_img">&nbsp;<span>&nbsp;...<a href="http://www.itfxz.vip/thread-3859-2-3.html" rel="nofollow">2</a></span></th> 
  </tr> 
 </tbody> 
 <tbody> 
  <tr> 
   <th><a title="更多操作" rel="nofollow"></a><a href="http://www.itfxz.vip/thread-3852-1-3.html" rel="nofollow">某课网 - Javascript 设计模式系统讲解与应用</a>&nbsp;<span>&nbsp;...<a href="http://www.itfxz.vip/thread-3852-2-3.html" rel="nofollow">2</a><a href="http://www.itfxz.vip/thread-3852-3-3.html" rel="nofollow">3</a><a href="http://www.itfxz.vip/thread-3852-4-3.html" rel="nofollow">4</a><a href="http://www.itfxz.vip/thread-3852-5-3.html" rel="nofollow">5</a></span></th> 
  </tr> 
 </tbody> 
</table>

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

[Link 1]: https://www.jb51.net/article/160853.htm#