vue父組件點擊觸發(fā)子組件事件的實例講解

更新時間：2018年02月08日 08:57:11 作者：小k前端雜談

下面小編就為大家分享一篇vue父組件點擊觸發(fā)子組件事件的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

最近在學(xué)習(xí)Vue父子組件通信的問題，剛好遇到一個父子之間事件事件派發(fā)與接收，在這里記錄一下，在這里我使用的是ref

給子組件注冊引用信息。官網(wǎng)是這樣解釋的

ref 被用來給元素或子組件注冊引用信息。引用信息將會注冊在父組件的 $refs 對象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素; 如果用在子組件上，引用就指向組件實例:

父組件app.vue

<template>
  <div id="app">
  <!--父組件-->
  <input v-model="msg">
  <button v-on:click="notify">廣播事件</button>
  <!--子組件-->
  <popup ref="child" ></popup>
  </div>
 </template>
 <script>
  import popup from '@/components/popup'
  export default {
  name: 'app',
  data: function () {
   return {
   msg: ''
   }
  },
  components: {
   popup
  },
  methods: {
   notify: function () {
   if (this.msg.trim()) {
    this.$refs.child.parentMsg(this.msg)
   }
   }
  }
  }
 </script>
 <style>
  #app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  }
 </style>

子組件popup.vue

<template>
   <div>
   <ul>
    <li v-for="item in messages">父組件輸入了：{{item}}</li>
   </ul>
   </div>
  </template>
  <style>
   body {
    background-color: #ffffff;
   }
  </style>
  <script>
  export default{
   name: 'popup',
   data: function () {
   return {
    messages: []
   }
   },
   methods: {
   parentMsg: function (msg) {
    this.messages.push(msg)
   }
   }
  }
  </script>

我把這個實例分為幾個步驟解讀：

1、父組件的button元素綁定click事件,該事件指向notify方法

2、給子組件注冊一個ref="child"

3、父組件的notify的方法在處理時，使用了$refs.child把事件傳遞給子組件的parentMsg方法，同時攜帶著父組件中的參數(shù)msg

4、子組件接收到父組件的事件后，調(diào)用了parentMsg方法，把接收到的msg放到message數(shù)組中

運行結(jié)果如下：

以上這篇vue父組件點擊觸發(fā)子組件事件的實例講解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue首評加載速度及白屏?xí)r間優(yōu)化詳解
這篇文章主要介紹了vue項目優(yōu)化首評加載速度，以及白屏?xí)r間過久的問題，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-09-09
基于Vue生產(chǎn)環(huán)境部署詳解
下面小編就為大家?guī)硪黄赩ue生產(chǎn)環(huán)境部署詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
使用Vue3創(chuàng)建多布局系統(tǒng)的三種方法
布局是中大型網(wǎng)站或應(yīng)用的基礎(chǔ),假設(shè)你正在創(chuàng)建一個網(wǎng)頁應(yīng)用,它包括主頁、營銷頁面和應(yīng)用頁面,你不會想要為每一頁重復(fù)所有的工作,對吧,與Nuxt不同,Vue 3并沒有內(nèi)置的布局系統(tǒng),但是別擔(dān)心,這里將向你展示3種簡單的方法來實現(xiàn)這一點,需要的朋友可以參考下
2023-08-08
Vue使用extend動態(tài)創(chuàng)建組件的實現(xiàn)
本文主要介紹了Vue使用extend動態(tài)創(chuàng)建組件的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
vue router返回到指定的路由的場景分析
這篇文章主要介紹了vue router返回到指定的路由的場景分析,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-11-11
vue主動刷新頁面及列表數(shù)據(jù)刪除后的刷新實例
今天小編就為大家分享一篇vue主動刷新頁面及列表數(shù)據(jù)刪除后的刷新實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
Vue監(jiān)聽Enter鍵的方法總結(jié)與區(qū)別
這篇文章主要給大家介紹了關(guān)于Vue監(jiān)聽Enter鍵的方法與區(qū)別的相關(guān)資料,在Vue中我們可以通過監(jiān)聽鍵盤事件來實現(xiàn)回車鍵切換焦點的功能,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2023-10-10
Vue3使用Proxy構(gòu)建高效響應(yīng)式數(shù)據(jù)的示例代碼
在 Vue 3 中,Proxy 主要用于攔截對象的基本操作,包括屬性讀取（get）、修改（set）、刪除（deleteProperty）等,本文給大家介紹了Vue3使用Proxy構(gòu)建高效響應(yīng)式數(shù)據(jù)的操作教程,需要的朋友可以參考下
2025-03-03
vue3?中的toRef函數(shù)和toRefs函數(shù)的基本使用
這篇文章主要介紹了vue3?toRef函數(shù)和toRefs函數(shù),文中介紹了ref和toRef的區(qū)別，ref本質(zhì)是拷貝，修改響應(yīng)式數(shù)據(jù)不會影響原始數(shù)據(jù)，toRef的本質(zhì)是引用關(guān)系，修改響應(yīng)式數(shù)據(jù)會影響原始數(shù)據(jù)，需要的朋友可以參考下
2022-11-11
vue中優(yōu)雅實現(xiàn)數(shù)字遞增特效的詳細過程
項目中需要做數(shù)字滾動增加的效果,一開始很懵,研究了一下原理,發(fā)現(xiàn)很簡單,下面這篇文章主要給大家介紹了關(guān)于vue中優(yōu)雅實現(xiàn)數(shù)字遞增特效的詳細過程,需要的朋友可以參考下
2022-12-12