如何使用 createElement 在渲染方法上定义 Vue 事件

Posted 2023-02-23

【中文标题】如何使用 createElement 在渲染方法上定义 Vue 事件

【英文标题】：How to define Vue Events on Render Method using createElement

【发布时间】：2018-06-21 12:58:03

【问题描述】：

我正在使用 ElementUi NavMenu，并使用 createElement 方法呈现菜单项，仅使用带有菜单标题和索引的 JSON，仅使用 html 和 JS 文件，而不是 .vue 文件。

菜单已安装，单击时会显示子菜单，但子菜单（el-menu-item）的操作不起作用。我什至尝试了属性 click, item-click, v-on: click when creating the-menu-item （ElementUi的文档告诉必须使用@click，但这会导致createElement在属性为已定义），但是没有人工作，没有错误发生，就好像该方法没有被声明一样。

只有onclick属性对el-menu-item有效，但是当我使用它时，vue组件的方法没有被调用，所以我必须在组件之外创建一个函数（例如在一个类上） , 当这个函数被调用时，它会调用组件方法（我尝试 $ 发出）并发生错误，因为找不到组件的方法。

如何在组件的渲染函数内的 el-menu-item 上添加@click（或类似的）事件以调用同一组件的方法？

Documenation of NavMenu of ElementUI.

我如何创建菜单项：

createElement("el-menu-item",
    attrs:
        index:json[i].id,
        click:json[i].onclick
    ,
    json[i].title
)

【参考方案1】：

实际上，这在 Vue.js 文档中有所提及。

见https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth。

例如https://codepen.io/jacobgoh101/pen/ypjGqw?editors=0010

Vue.component("test", 
  render: function(createElement) 
    return createElement(
      "button",
      
        on: 
          click: function() 
            alert('click');
          
        
      ,
      "Header"
    );
  
);