Vue $emit $refs子父組件間方法的調(diào)用實(shí)例
更新時間：2018年09月12日 10:57:05 作者：superlovelei
今天小編就為大家分享一篇Vue $emit $refs子父組件間方法的調(diào)用實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
1、$emit
子組件調(diào)用父組件的方法并傳遞數(shù)據(jù)
注意：子組件標(biāo)簽中的時間也不區(qū)分大小寫要用“-”隔開
子組件：
<template>
<button @click="emitEvent">點(diǎn)擊我</button>
</template>
<script>
export default {
data() {
return {
msg: "我是子組件中的數(shù)據(jù)"
}
},
methods: {
emitEvent(){
this.$emit('my-event', this.msg)
//通過按鈕的點(diǎn)擊事件觸發(fā)方法，然后用$emit觸發(fā)一個my-event的自定義方法，傳遞this.msg數(shù)據(jù)。
}
}
}
</script>
父組件：
<template>
<div id="app">
<child-a @my-event="getMyEvent"></child-a>
<!--父組件中通過監(jiān)測my-event事件執(zhí)行一個方法，然后取到子組件中傳遞過來的值-->
</div>
</template>
<script>
import ChildA from './components/child.vue'
export default {
components: {
ChildA
},
methods: {
getMyEvent(msg){
console.log('接收的數(shù)據(jù)--------->'+msg)//接收的數(shù)據(jù)--------->我是子組件中的數(shù)據(jù)
}
}
}
</script>
2、$refs
父組件調(diào)用子組件的方法，可以傳遞數(shù)據(jù)
注意：子組件標(biāo)簽中的時間也不區(qū)分大小寫要用“-”隔開
父組件：
<template>
<div id="app">
<child-a ref="child"></child-a>
<!--用ref給子組件起個名字-->
<button @click="getMyEvent">點(diǎn)擊父組件</button>
</div>
</template>
<script>
import ChildA from './components/child.vue'
export default {
components: {
ChildA
},
data() {
return {
msg: "我是父組件中的數(shù)據(jù)"
}
},
methods: {
getMyEvent(){
this.$refs.child.emitEvent(this.msg);
//調(diào)用子組件的方法，child是上邊ref起的名字，emitEvent是子組件的方法。
}
}
}
</script>
子組件：
<template>
<button>點(diǎn)擊我</button>
</template>
<script>
export default {
methods: {
emitEvent(msg){
console.log('接收的數(shù)據(jù)--------->'+msg)//接收的數(shù)據(jù)--------->我是父組件中的數(shù)據(jù)
}
}
}
</script>
以上這篇Vue $emit $refs子父組件間方法的調(diào)用實(shí)例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3實(shí)現(xiàn)父組件提交校驗(yàn)多個子組件
這篇文章主要為大家詳細(xì)介紹了vue3如何實(shí)現(xiàn)父組件在提交事件中校驗(yàn)多個子組件中的form件,文中的示例代碼講解詳細(xì),有需要的小伙伴可以參考一下2023-11-11
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)全選和反選功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
Vue3+TS項(xiàng)目中eslint、prettier安裝配置詳細(xì)指南
為了更好的統(tǒng)一項(xiàng)目的代碼風(fēng)格,因此在編寫時就可以使用eslint+prettier,它們不僅能方便代碼編寫,還能避免不必要的錯誤,讓代碼變得更加嚴(yán)謹(jǐn),這篇文章主要給大家介紹了關(guān)于Vue3+TS項(xiàng)目中eslint、prettier安裝配置的相關(guān)資料,需要的朋友可以參考下2024-07-07
在現(xiàn)代Web開發(fā)中,Vue.js與Flask或Django配合使用,實(shí)現(xiàn)前后端分離,提高開發(fā)效率和應(yīng)用性能,本文介紹了整合Vue.js和Flask/Django的步驟,包括環(huán)境搭建、API編寫、項(xiàng)目配置,以及生產(chǎn)部署,此架構(gòu)不僅加快了開發(fā)進(jìn)程,還提高了項(xiàng)目的可維護(hù)性和可擴(kuò)展性2024-09-09
本篇文章主要介紹了vue頁面使用阿里oss上傳功能的實(shí)例（一），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
vue3實(shí)現(xiàn)按鈕權(quán)限管理的項(xiàng)目實(shí)踐
在做后臺管理系統(tǒng)時,經(jīng)常會有權(quán)限管理的功能,本文主要介紹了vue3實(shí)現(xiàn)按鈕權(quán)限管理的項(xiàng)目實(shí)踐,具有一定的參考價值,感興趣的可以了解一下2023-08-08
使用el-checkbox-group選中后值為true和false遇到的坑
這篇文章主要介紹了使用el-checkbox-group選中后值為true和false遇到的坑及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
本篇文章主要介紹了Vue 單文件中的數(shù)據(jù)傳遞示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
vue 通過base64實(shí)現(xiàn)圖片下載功能
這篇文章主要介紹了vue 通過base64實(shí)現(xiàn)圖片下載功能，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
解決vue3項(xiàng)目打包后部署后某些靜態(tài)資源圖片不加載問題
這篇文章主要給大家介紹了如何解決vue3項(xiàng)目打包后部署后某些靜態(tài)資源圖片不加載問題,文中通過圖文結(jié)合的方式講解的非常詳細(xì),有需要的朋友可以參考下2024-05-05