Question

我有以下VueJS组件：

Vue.component('label-ui', {
    props: ['type', 'size', 'color', 'position'],

    template: `
        <div :class="[type, size, color, position]" class="ui labels">
            <slot></slot>
        </div>
    `

我想重写这个，以便我可以动态设置模板的html标签 - 类似于我对此代码的处理方式：

  props: ['tag', 'attributes'],
  render(createElement) {
    return createElement(this.tag || 'div', {attrs: this.attributes || {}}, this.$slots.default);
  }

但是，我想使用JSX语法 - 如下所示：https://vuejs.org/v2/guide/render-function.html#JSX

但是，我无法弄清楚如何使用JSX格式来做到这一点。

有什么想法吗？

由于

Answer 1

听起来好像你已经为Webpack设置了正确的babel插件进行转换。

浏览器本身不支持JSX，像Webpack这样的模块捆绑器会从JSX转换（从JSX转换为Javascript），这是浏览器无法理解的格式这是浏览器所理解的。

这将是你需要采取的第一步，也可能是你所缺少的。

Answer 2

只需安装babel-plugin-transform-vue-jsx 我没有任何东西要添加到配置中。它直接起作用。

使用JSX和渲染函数重写VueJS组件

2 个答案: