在vue中如何實作父元件點擊觸發子元件事件

下面我就為大家分享一篇vue父元件點擊觸發子元件事件的實例講解，具有很好的參考價值，希望對大家有幫助。

最近在學習Vue父子元件通訊的問題，剛好遇到一個父子之間事件事件派發與接收，在這裡記錄一下，這裡我使用的是ref

給子元件註冊引用資訊。 官網是這樣解釋的

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

父元件app.vue

<template>
  <p id="app">
  <!--父组件-->
  <input v-model="msg">
  <button v-on:click="notify">广播事件</button>
  <!--子组件-->
  <popup ref="child" ></popup>
  </p>
 </template>
 <script>
  import popup from &#39;@/components/popup&#39;
  export default {
  name: &#39;app&#39;,
  data: function () {
   return {
   msg: &#39;&#39;
   }
  },
  components: {
   popup
  },
  methods: {
   notify: function () {
   if (this.msg.trim()) {
    this.$refs.child.parentMsg(this.msg)
   }
   }
  }
  }
 </script>
 <style>
  #app {
  font-family: &#39;Avenir&#39;, 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>
   <p>
   <ul>
    <li v-for="item in messages">父组件输入了：{{item}}</li>
   </ul>
   </p>
  </template>
  <style>
   body {
    background-color: #ffffff;
   }
  </style>
  <script>
  export default{
   name: &#39;popup&#39;,
   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方法，同時帶著父元件中的參數msg

4、子元件接收到父元件的事件後，呼叫了parentMsg方法，把接收到的msg放到message陣列中

運行結果如下：

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

在Vue2.0中實作使用者權限控制

詳解如何實作vuex（詳細教學）

透過vue.js實作微信支付

#

以上是在vue中如何實作父元件點擊觸發子元件事件的詳細內容。更多資訊請關注PHP中文網其他相關文章！