goka 动态创建 Emitter
时间: 2023-08-07 21:02:28 浏览: 39
在 Vue 中,可以使用 `Vue.extend()` 方法动态创建组件,并使用 `$emit` 方法来触发该组件的自定义事件。
具体实现步骤如下:
1. 使用 `Vue.extend()` 方法创建一个组件构造函数。
2. 在组件构造函数中定义需要触发的自定义事件,例如 `this.$emit('myEvent', data)`。
3. 使用 `new` 关键字创建组件实例,并将其挂载到一个元素上。
4. 在父组件中监听该组件的自定义事件,例如 `@myEvent="handleEvent"`。
以下是一个动态创建组件并触发自定义事件的例子:
```vue
<template>
<div>
<button @click="createComponent">Create Component</button>
<div ref="container"></div>
</div>
</template>
<script>
export default {
methods: {
createComponent() {
const Component = Vue.extend({
template: '<div>{{ message }}</div>',
data() {
return {
message: 'Hello, world!'
}
},
mounted() {
setTimeout(() => {
this.$emit('myEvent', this.message)
}, 1000)
}
})
const component = new Component()
component.$mount(this.$refs.container)
component.$on('myEvent', data => {
console.log(data)
})
}
}
}
</script>
```
在上面的例子中,我们定义了一个按钮,点击该按钮会动态创建一个组件,并将其挂载到 `div` 元素上。在组件的 `mounted` 钩子函数中,使用 `setTimeout()` 方法延迟 1 秒触发一个自定义事件 `myEvent`,并传递组件的数据 `message`。在父组件中监听该自定义事件,并在事件处理函数中打印出传递的数据。
需要注意的是,动态创建组件需要谨慎使用,因为创建过多的组件可能会影响应用的性能。如果需要频繁地创建和销毁组件,可以考虑使用组件的复用,或者使用一些第三方库来优化组件的性能。