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

时间:2018-01-12 05:09:38

标签: vue.js element-ui

我正在使用ElementUi NavMenu,并使用createElement方法渲染函数,使菜单的项目只使用带有菜单标题和索引的JSON,只有HTML和JS文件,而不是.vue文件。

安装菜单,单击时会显示子菜单,但子菜单(el-menu-item)的操作不起作用。我甚至尝试使用click,item-click,v-on属性:在创建菜单项时单击(ElementUi的文档告诉我必须使用@click,但这会导致createElement出错当定义了属性时,但没有人工作,就不会发生错误,就像没有声明方法一样。

只有onclick属性才能在el-menu-item上运行,但是当我使用它时,不会调用vue组件的方法,所以我必须在组件之外创建一个函数(在类的上面)示例),当调用此函数时,它会执行对组件方法的调用(我尝试$ emits)并发生错误,因为找不到组件的方法。

如何在组件内部的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 个答案:

答案 0 :(得分:2)

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

请参阅https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth

e.g。 https://codepen.io/jacobgoh101/pen/ypjGqw?editors=0010

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