前言：最近在做管理系統(tǒng)栋操，頁面基本都是組件模塊化闸餐，如果遇到點(diǎn)擊父組件里的一個(gè)事件要調(diào)取子組件里的方法該怎么實(shí)現(xiàn)，上代碼（仔細(xì)看注釋說明）矾芙。
父組件
//如果我們單純的只是想調(diào)取子組件的方法--方法一
//如果我們想調(diào)取子組件又要傳值的方法--方法二
<el-tabs v-model="tabType" @tab-click="handleClick"> <!-- handleClick為父組件的點(diǎn)擊事件 -->
<el-tab-pane v-for="(item,index) in tabList" :key="index" :label="item.name" :id="item.id"></el-tab-pane>
</el-tabs>
<!-- 下面的是我們在父組件里面引入的子組件（用ref綁定一個(gè)自定義名） -->
<el-aside width="300px" v-if="tabId !== ''">
<video-tree ref="editTree" :type="1" :tabId="tabId" @success="treeSuccess" @totalPages="totalPage" @totalElements="totalElement"/>
</el-aside>
<!-- 下面是js代碼 -->
//方法一
handleClick() { //這里的editTree是剛剛我們定義的ref,后面的callMethod是方法名（自定義）
this.$refs.editTree.callMethod();
},
//方法二
handleClick() { //這里的用$emit
this.$refs.editTree.$emit('callMethod','要發(fā)送的數(shù)據(jù)')
},
子組件
methods:{
//方法一
callMethod(){ //這里是我們在父組件定義的方法
this.getList() //這里是你想要調(diào)起的子組件的方法
},
//方法二
getFunc(){ //寫一個(gè)方法在初始化的時(shí)候調(diào)用一下
this.$on('callMethod', (res) => { //callMethod我們在父組件定義的方法名
this.getList(res) //這里是你想要調(diào)起的子組件的方法并傳進(jìn)帶過來的數(shù)據(jù)
},
}
mounted(){
this.getFunc()
}
注釋寫的很明白不懂的一定要多看下注釋舍沙，希望能幫到各位~
end~~~
如有錯(cuò)誤或觀點(diǎn)不一致的請?jiān)u論留言共同討論，本人前端小白一枚剔宪，根據(jù)自己實(shí)際項(xiàng)目遇到的問題進(jìn)行總結(jié)分享拂铡，謝謝大家的閱讀！
文章對您有所幫助請給作者點(diǎn)個(gè)贊支持下葱绒，謝謝~
