javascript - Vue3 监听动态创建的子组件的事件，$on replacement

Question

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

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

  let props = {
     /** some props **/
  };

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

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

如何使用 Vue3 实现此目的？

Answer 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