Subscribe on changes!

h函数渲染不支持v-on事件绑定,渲染组件的时候无法使用字符串表示组件

avatar
Aug 23rd 2021

Version

3.2.4

Reproduction link

https://codepen.io/linjiahao962889027/pen/zYzObOz

Steps to reproduce

点击按钮后可以触发handle事件,但是在Element Plus的弹出框中的ElButton的绑定事件无法使用,handle2函数也无法触发。

What is expected?

为h函数绑定事件click,触发函数handle2

What is actually happening?

无法触发handle2,查看HTML文件后发现在dom上绑定为on:[object object]


在我使用Element Plus的msgbox的时候,根据Element Plus文档其支持使用自定义组件,使用h函数即可。当我使用h函数后,渲染出来的组件虽然dom成功被渲染,但事件无法被绑定,最后变成<dom on:[Object Object]>的形式,这是不正确的。根据以往的使用经验来看,on属性应当被渲染为事件触发,根据Vue 3.0的文档也是这么描述的。重现链接是一个vue工程中的信息,JavaScript文件应当放在标签中。

avatar
Aug 23rd 2021

请先去 Element Plus 的仓库提交相应问题,确认非第三方依赖问题后,请提供一个不含此类依赖的可复现环境,谢谢。

avatar
Aug 23rd 2021

你这个问题比较简单,Vue 3 的 render function 不再有 on 属性了,请仔细查看文档:https://v3.vuejs.org/guide/render-function.html#v-on

avatar
Aug 23rd 2021

你这个问题比较简单,Vue 3 的 render function 不再有 on 属性了,请仔细查看文档:https://v3.vuejs.org/guide/render-function.html#v-on

OK,这个问题解决了,但或许你们需要更新一下你们文档中的搜索功能,当我在搜索框中搜索h函数的时候并没有这么详细的信息。

avatar
Aug 23rd 2021

请先详细了解 Vue 2 迁移到 Vue 3 的非兼容性变化,这是用 Vue 3 进行开发的基础。你这个问题在里面都有提到的。

https://v3.vuejs.org/guide/migration/render-function-api.html#vnode-props-format