vue3在單個(gè)組件中實(shí)現(xiàn)類似mixin的事件調(diào)用
更新時(shí)間：2024年01月19日 15:11:40 作者：恍恍惚惚斯基
這篇文章主要為大家詳細(xì)介紹了vue3如何在單個(gè)組件中實(shí)現(xiàn)類似mixin的事件調(diào)用,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
簡單的訂閱發(fā)布功能
class MyDispatch {
constructor() {
this._dispatch_list = []
}
register_on(id, command_type, func) { // 注冊事件
const dispatch_obj = { id, command_type, func: func }
this._dispatch_list.push(dispatch_obj)
}
register_off(id) { // 移除事件
this._dispatch_list = this._dispatch_list.filter(item => item.id !== id)
}
dispatch(command_type, data) { // 觸發(fā)并執(zhí)行事件，根據(jù)command_type區(qū)分類型
for (let i = 0; i < this._dispatch_list.length; i++) {
const dispatch_obj = this._dispatch_list[i]
if (command_type === dispatch_obj.command_type) {
dispatch_obj.func(data)
}
}
}
}
// 混入的代碼
function testA(emits) {
const data = '執(zhí)行成功咯！'
emits.dispatch('do', data)
}
// 組件代碼
function mainTest() {
const emits = new MyDispatch()
emits.register_on('testB', 'do', testB)
testA(emits)
function testB(data) {
console.log('testB 執(zhí)行，', data)
}
}
mainTest()
運(yùn)行結(jié)果
this綁定
function testA() {
const data = '執(zhí)行成功咯！'
const testB = this.testB
if (testB) {
testB(data)
}
}
function mainTest() {
const thisArg = {
testB: testB
}
testA.call(thisArg)
function testB(data) {
console.log('testB 執(zhí)行，', data)
}
}
mainTest()
執(zhí)行結(jié)果同上
到此這篇關(guān)于vue3在單個(gè)組件中實(shí)現(xiàn)類似mixin的事件調(diào)用的文章就介紹到這了,更多相關(guān)vue3 mixin內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了用Vue制作的簡易計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
組件是 vue.js 最強(qiáng)大的功能之一,而組件實(shí)例的作用域是相互獨(dú)立的,這就意味著不同組件之間的數(shù)據(jù)無法相互引用,針對不同的使用場景,如何選擇行之有效的通信方式？這是我們所要探討的主題,本文總結(jié)了 vue 組件間通信的幾種方式,需要的朋友可以參考下2025-03-03
VUE實(shí)現(xiàn)一個(gè)Flappy Bird游戲的示例代碼
這篇文章主要介紹了VUE實(shí)現(xiàn)一個(gè)Flappy Bird的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
vite+vue3中require?is?not?defined問題及解決
這篇文章主要介紹了vite+vue3中require?is?not?defined問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了Vant Weapp組件踩坑:picker的初始賦值解決，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue 基于abstract 路由模式 實(shí)現(xiàn)頁面內(nèi)嵌的示例代碼
這篇文章主要介紹了vue 基于abstract 路由模式 實(shí)現(xiàn)頁面內(nèi)嵌的示例代碼，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
這篇文章主要介紹了vue格式化時(shí)間過濾器，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Vue實(shí)現(xiàn)當(dāng)前頁面刷新的七種方法總結(jié)
大家在vue項(xiàng)目中當(dāng)刪除或者增加一條記錄的時(shí)候希望當(dāng)前頁面可以重新刷新，但是vue框架自帶的router是不支持刷新當(dāng)前頁面功能,所以本文就給大家分享了七種vue實(shí)現(xiàn)當(dāng)前頁面刷新的方法,需要的朋友可以參考下2023-07-07
Vue中@keyup.enter?@v-model.trim的用法小結(jié)
這篇文章主要介紹了Vue中@keyup.enter?@v-model.trim的用法,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-12-12
這篇文章主要介紹了vue打包添加gzip配置項(xiàng)方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08