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

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 22:20:00

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

vue父組件點擊觸發(fā)子組件事件的實例講解:最近在學(xué)習(xí)Vue父子組件通信的問題，剛好遇到一個父子之間事件事件派發(fā)與接收，在這里記錄一下，在這里我使用的是ref 給子組件注冊引用信息。官網(wǎng)是這樣解釋的 ref 被用來給元素或子組件注冊引用信息。引用信息將會注冊在父組件的 $refs 對象上。如果在普通的

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀vue父組件點擊觸發(fā)子組件事件的實例講解:最近在學(xué)習(xí)Vue父子組件通信的問題，剛好遇到一個父子之間事件事件派發(fā)與接收，在這里記錄一下，在這里我使用的是ref 給子組件注冊引用信息。官網(wǎng)是這樣解釋的 ref 被用來給元素或子組件注冊引用信息。引用信息將會注冊在父組件的 $refs 對象上。如果在普通的

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