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

2019-11-19 14:23:42

字體：大中小

供稿：網(wǎng)友

最近在學(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é)果如下：