Vue3 监听来自动态创建的子组件的事件，$on 替换

Posted 2023-02-23

【中文标题】Vue3 监听来自动态创建的子组件的事件，$on 替换

【英文标题】：Vue3 Listen to event from dynamically created child component, $on replacement

【发布时间】：2021-08-03 14:29:35

【问题描述】：

我正在动态创建一个 Vue 组件，我想监听它发出的事件。我知道您可以在标记中使用@eventName，但我正在使用createApp 创建组件。

  const div = document.createElement('div');
  this.$refs.login.appendChild(div);

  let props = 
     /** some props **/
  ;

  createApp(Component, props,).mount(div);

这就是我创建Component 的方式。这个答案here 适用于我的问题，但它适用于 Vue2 并且 $on 已在 Vue3 中删除。

如何使用 Vue3 实现这一点？

【问题讨论】：

我能想到的一件事是将回调作为道具传递，然后在子组件中执行，但这似乎有点乱。

【参考方案1】：

您可以使用render function (h) 添加事件处理程序。 h 的第二个参数是一个对象，其以 "on" 开头的键被视为事件处理程序。例如，为click 事件和名为my-event 的事件添加处理程序：

import  h  from 'vue'

const comp = h(Component, 
  onClick: e => console.log('click', e),
  onMyEvent: e => console.log('my-event', e),
)
createApp(comp, props).mount(div)

demo 1

如果您的项目支持JSX，则等效为：

const comp = <Component onClick=e => console.log('click', e)
                        onMyEvent=e => console.log('my-event', e) />
createApp(comp, props).mount(div)

demo 2