VueJS 3 : 通过js代码添加事件监听器

Question

Vue3中有没有通过js代码添加监听的选项？

在孩子体内，我发出这样的事件：

this.$emit('someEvent', msg);

在家长中我是这样听的：

<some-child v-on:someEvent="handleSomeEvent" />

但是我正在寻找一种方法来开始监听这样的事件：

this.$refs.someChild.$on('someEvent', (evt) => {});

// or 

this.$refs.someChild.addEventlistener('someEvent', (evt) => {});

Answer 1

我假设您想动态监听不同的事件？那样的话

在家长中

<some-child v-on="myEvents" />

data(){
    return{
        myEvents:{
            someEvent:(evt)=>{console.log(evt)},
            someOtherEvent:(evt)=>{console.log(evt)},
        }
    }
}

相当于

<some-child @someEvent="..." @someOtherEvent="..." />

现在您可以向

myEvents

添加新侦听器或通过设置

this.myEvents.someEvent = myNewCallback

更改现有侦听器

Answer 2

动态更改点击功能

这可能不是最有弹性的方法，但它应该有效。

模板

点击事件总是指向同一个地方：

<MyItem @click="MyClickEvent" />

脚本

声明函数；默认状态什么都不能，或者各种各样的东西，也许是另一个功能：

const MyClickEvent = ref()

在其他地方，动态声明新的函数逻辑：

// ...

const processClick = () => {

    console.log("Click happened")

    // Clear the click logic, if you want
    MyClickEvent.value = undefined
}

// Apply new logic to the click handler:
MyClickEvent.value = () => {
    processClick()
}

// ...