如何从 vue 渲染中发射

【问题标题】：How to emit from vue render如何从 vue 渲染中发射
【发布时间】：2021-01-08 02:00:16
【问题描述】：

我正在使用render() 渲染组件，而不是来自 HTML 模板。我想从我正在渲染的组件中发出一个属性，但我不确定如何在渲染的组件中获取它（我会在 HTML 模板中使用 @）。

谢谢！

【问题讨论】：

【解决方案1】：

VNode 数据object 通过on 属性处理事件：

on: {
  click: this.clickHandler
}

假设您正在渲染一个发出 myevent 事件的 <child> 组件，您将渲染它并按如下方式处理该事件：

render(h) {
  return h('child', {
    on: {
      myevent: this.onMyevent
    }
  });
}

onMyevent 只是一个普通的处理方法：

methods: {
  onMyevent(value) {
    console.log(value);
  }
}

【讨论】：

【解决方案2】：

在 vue 3 中使用语法糖时似乎有点不同。

在孩子身上：


const emits = defineEmits(['delete']);

then

<button @click="emits('delete')">delete</button>


   render(h(bar, {
      onDelete: (ev) => {
        console.log(ev)
      }

注意on 应该添加到onDelete

【讨论】：