私は、次のVueJSコンポーネント持ってJSXを使用してVueJSコンポーネントの書き換えや機能

Question

をレンダリング：

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フォーマを使用してこれを行う方法は、しかし、把握することはできませんt。

アイデア？

おかげ

Answer 1

あなたがtranspiling用に設定され、正しいバベルのプラグインでのWebPACKを持っているようには聞こえません。

JSXはブラウザでネイティブにサポートされていません。Webpackのようなモジュールバンドラは、ブラウザでは理解できないJSX（ブラウザでは理解できないJSXから）に変換されます。

それはあなたが取る必要がある最初のステップとおそらくあなたが欠けているものになるでしょう。

Answer 2

ただインストールするbabel-plugin-transform-vue-jsx 私は設定に何も追加していません。それは直接働いた。