重寫VueJS組件使用JSX和渲染功能

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與設立transpiling正確的巴貝爾插件。

JSX本身不受瀏覽器支持，像Webpack這樣的模塊打包程序將從JSX（從瀏覽器無法理解）轉換（從JSX轉換爲Javascript）爲瀏覽器可以理解的格式。

這將是您需要採取的第一步，可能是你錯過了什麼。

Answer 2

只要安裝babel-plugin-transform-vue-jsx 我已經沒有什麼可添加到配置。它直接工作。