vue父組件點(diǎn)擊觸發(fā)子組件事件的實(shí)例講解
最近在學(xué)習(xí)Vue父子組件通信的問題，剛好遇到一個(gè)父子之間事件事件派發(fā)與接收，在這里記錄一下，在這里我使用的是ref
給子組件注冊(cè)引用信息。官網(wǎng)是這樣解釋的
ref 被用來給元素或子組件注冊(cè)引用信息。引用信息將會(huì)注冊(cè)在父組件的 $refs 對(duì)象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素; 如果用在子組件上，引用就指向組件實(shí)例:
父組件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>
我把這個(gè)實(shí)例分為幾個(gè)步驟解讀：
1、父組件的button元素綁定click事件,該事件指向notify方法
2、給子組件注冊(cè)一個(gè)ref="child"
3、父組件的notify的方法在處理時(shí)，使用了$refs.child把事件傳遞給子組件的parentMsg方法，同時(shí)攜帶著父組件中的參數(shù)msg
4、子組件接收到父組件的事件后，調(diào)用了parentMsg方法，把接收到的msg放到message數(shù)組中
運(yùn)行結(jié)果如下：
以上這篇vue父組件點(diǎn)擊觸發(fā)子組件事件的實(shí)例講解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue與django集成打包的實(shí)現(xiàn)方法
這篇文章主要介紹了vue與django集成打包的實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
vue?mounted周期中document.querySelectorAll()獲取不到元素的解決
這篇文章主要介紹了vue?mounted周期中document.querySelectorAll()獲取不到元素的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了Vue 集成 storybook的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
vue學(xué)習(xí)教程之帶你一步步詳細(xì)解析vue-cli
這篇文章的主題是vue-cli的理解。或許，很多人在開發(fā)vue的時(shí)候，我們會(huì)發(fā)現(xiàn)一個(gè)問題——只會(huì)去用，而不明白它的里面的東西。現(xiàn)在的框架可以說是足夠的優(yōu)秀，讓開發(fā)者不用為搭建開發(fā)環(huán)境而煩惱。但是有時(shí)候，我們還是得回到原始生活體驗(yàn)一下，才能夠讓自己更上層樓。2017-12-12
Vue導(dǎo)入excel文件的兩種方式(form表單和el-upload)
最近開發(fā)遇到一個(gè)點(diǎn)擊導(dǎo)入按鈕讓excel文件數(shù)據(jù)導(dǎo)入的需求,下面這篇文章主要給大家介紹了關(guān)于Vue導(dǎo)入excel文件的兩種方式,分別是form表單和el-upload兩種方法,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vue-router路由傳參及隱藏參數(shù)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了vue如何獲取當(dāng)前url地址加端口號(hào)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09
vue使用swiper的時(shí)候第二輪事件不會(huì)觸發(fā)問題
這篇文章主要介紹了vue使用swiper的時(shí)候第二輪事件不會(huì)觸發(fā)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue項(xiàng)目怎樣用nginx反向代理WebSocket請(qǐng)求地址
這篇文章主要介紹了vue項(xiàng)目怎樣用nginx反向代理WebSocket請(qǐng)求地址問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09
Vuex?是一個(gè)專為?Vue.js?應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化，這篇文章主要介紹了Vue?中?store?基本用法,需要的朋友可以參考下2023-01-01