Vueにおけるjsxの最も簡単な使い方

最終ページの表示効果は

class="open-service" style="color: #0199f0; cursor: pointer;">
    hello
    
world

ホームフェース
parent.vue

"</span><span style="color: #800000;">text/jsx</span><span style="color: #800000;">"</span>><span style="color: #000000;">
  import VueTest </span><span style="color: #0000ff;">from</span> <span style="color: #800000;">"</span><span style="color: #800000;">./jsx/VueTest</span><span style="color: #800000;">"</span><span style="color: #000000;">;
export </span><span style="color: #0000ff;">default</span><span style="color: #000000;"> {
  name: </span><span style="color: #800000;">'</span><span style="color: #800000;">HelloWorld</span><span style="color: #800000;">'</span><span style="color: #000000;">,
  components:{
    VueTest,
  },
  computed:{
    typeSpan(){
      </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> {
        text:</span><span style="color: #800000;">'</span><span style="color: #800000;">hello</span><span style="color: #800000;">'</span><span style="color: #000000;">,
        attrs:{
          </span><span style="color: #0000ff;">class</span>:<span style="color: #800000;">"</span><span style="color: #800000;">open-service</span><span style="color: #800000;">"</span><span style="color: #000000;">,
          style:</span><span style="color: #800000;">'</span><span style="color: #800000;">color:#0199f0;cursor:pointer</span><span style="color: #800000;">'</span><span style="color: #000000;">
        },

      }
    }
  },
}
</span>

サブページvueには2つの方法があります
第1種

"</span><span style="color: #800000;">text/jsx</span><span style="color: #800000;">"</span>><span style="color: #000000;">
export </span><span style="color: #0000ff;">default</span><span style="color: #000000;"> {
    props: {
        typeSpan:{
            type:Object,
            </span><span style="color: #0000ff;">default</span><span style="color: #000000;">:{}
        }
    },
    created(){

    },
    methods:{
        openContactService(){
            alert(</span><span style="color: #800080;">1</span><span style="color: #000000;">)
        },
    },
    render(createElement) {
        </span><span style="color: #0000ff;">return</span><span style="color: #000000;">(
            </span><<span style="color: #000000;">div
                </span><span style="color: #0000ff;">class</span>={<span style="color: #0000ff;">this</span>.typeSpan.attrs.<span style="color: #0000ff;">class</span><span style="color: #000000;">}
                style</span>={<span style="color: #0000ff;">this</span><span style="color: #000000;">.typeSpan.attrs.style}
                onClick</span>={<span style="color: #0000ff;">this</span>.openContactService}><span style="color: #000000;">
                {</span><span style="color: #0000ff;">this</span><span style="color: #000000;">.typeSpan.text}
              </span><p >world</p>
            </div><span style="color: #000000;">
        )
    }
}
</span>

第2種

"</span><span style="color: #800000;">text/jsx</span><span style="color: #800000;">"</span>><span style="color: #000000;">
export </span><span style="color: #0000ff;">default</span><span style="color: #000000;">  {
    props:{
        typeSpan:{
            type:Object,
            </span><span style="color: #0000ff;">default</span><span style="color: #000000;">:{}
        }
    },
    methods:{
        openContactService(){
          alert(</span><span style="color: #800080;">1</span><span style="color: #000000;">)
      }
    },
   render(createElement, context) {
        </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> createElement(
            </span><span style="color: #800000;">'</span><span style="color: #800000;">div</span><span style="color: #800000;">'</span><span style="color: #000000;">,{
                </span><span style="color: #0000ff;">class</span>:<span style="color: #0000ff;">this</span>.typeSpan.attrs.<span style="color: #0000ff;">class</span><span style="color: #000000;">,
                style:</span><span style="color: #0000ff;">this</span><span style="color: #000000;">.typeSpan.attrs.style,
                on:{
                    click:</span><span style="color: #0000ff;">this</span><span style="color: #000000;">.openContactService
                }
            },[
                </span><span style="color: #0000ff;">this</span><span style="color: #000000;">.typeSpan.text,
                createElement(</span><span style="color: #800000;">'</span><span style="color: #800000;">p</span><span style="color: #800000;">'</span>,<span style="color: #800000;">'</span><span style="color: #800000;">world</span><span style="color: #800000;">'</span><span style="color: #000000;">),
            ]

        )
   }
}
</span>

これは2つの最も簡単な例です
リファレンスリンクhttps://cn.vuejs.org/v2/guide/render-function.html