Vue3 H5 中使用 render 函数渲染节点时, onTap 不能触发点击事件

[b2nil]

相关平台

H5

复现仓库

https://github.com/b2nil/tapNclick.git
浏览器版本: Chrome Version 80.0.3987.87 (Official Build) (64-bit)
使用框架: Vue 3

复现步骤

• 运行 yarn dev:h5
• 点击相应的按钮

期望结果

点击使用 onTap 监听事件的按钮后，能够触发相应的点击事件

实际结果

不能触发点击事件

环境信息

Taro CLI 3.0.6 environment info: 
System:
    OS: Windows 10
    Binaries:
      Node: 12.18.1
      Yarn: 1.19.1 
      npm: 6.14.5 

---

补充信息

使用 Taro/Vue3 编译到 h5，如果直接采用 Vue 的 render 函数渲染 html 节点，使用 onTap 不能触发点击事件：

export default defineComponent({
  // 直接在 setup 中返回渲染函数
  setup(){
     return () => h('taro-button-core', { onTap: () => alert('无法触发事件')}, 'onTap')
  },
  
  // 或者采用 render（）渲染节点
  render() {
    return h('taro-button-core', { onTap: () => alert('无法触发事件')}, 'onTap')
  }
})

但如果采用 SFC template 来写，<button @tap="() => alert("可以触发")"> onTap </button>, @tap 是可以触发 onTap 点击事件的。

是不是 Taro 针对 Vue 的 template 做了处理，但没有对渲染函数进行处理？

[b2nil]

@Chen-jj
在 @tarojs/components/dist-h5/vue3/index 中, 将使用 createComponent 和 createFormsComponent 生成的组件导出，使用渲染函数渲染节点时， onTap 可以监听到 emit 的 tap 事件。

// '@tarojs/components/dist-h5/vue3/index.js'
export const View = createComponent('taro-view')
export const Button = createComponent('taro-button')

开发者在需要时可以选择性引用：

// 'user file'
import { View, Button } from "@tarojs/components/dist-h5/vue3"

这在将现有的基于 React 的库改写成基于 Vue 的库时，应该有一些帮助。例如，如果采用 jsx 来写的话，渲染函数需要修改的内容就非常少了。

[Chen-jj]

有点 hack，而且小程序用不了，先用 template 咯，之后有空跟进一下

[b2nil]

用 template 没有问题，但是 @tarojs/components/dist-h5/ 跟小程序有关系？

[b2nil]

抱歉， 使用 render 函数渲染通过 app.component 注册的组件， 需要使用 resolveComponent 方法： h(resolveComponent('taro-view'))， 而不是直接渲染标签： h('taro-view')。