Vue中jsx的最简单用法

Posted 2022-07-11 ttjm

最终页面显示效果为

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

主页面

parent.vue

<template>
  <div class="hello">
    <vue-test :typeSpan="typeSpan"></vue-test>
  </div>
</template>

<script type="text/jsx">
  import VueTest from "./jsx/VueTest";
export default 
  name: ‘HelloWorld‘,
  components:
    VueTest,
  ,
  computed:
    typeSpan()
      return 
        text:‘hello‘,
        attrs:
          class:"open-service",
          style:‘color:#0199f0;cursor:pointer‘
        ,

      
    
  ,

</script>

子页面child.vue有两种方法

第一种

<script type="text/jsx">
export default 
    props: 
        typeSpan:
            type:Object,
            default:
        
    ,
    created()

    ,
    methods:
        openContactService()
            alert(1)
        ,
    ,
    render(createElement) 
        return(
            <div
                class=this.typeSpan.attrs.class
                style=this.typeSpan.attrs.style
                onClick=this.openContactService>
                this.typeSpan.text
              <p >world</p>
            </div>
        )
    

</script>

第二种

<script type="text/jsx">
export default  
    props:
        typeSpan:
            type:Object,
            default:
        
    ,
    methods:
        openContactService()
          alert(1)
      
    ,
   render(createElement, context) 
        return createElement(
            ‘div‘,
                class:this.typeSpan.attrs.class,
                style:this.typeSpan.attrs.style,
                on:
                    click:this.openContactService
                
            ,[
                this.typeSpan.text,
                createElement(‘p‘,‘world‘),
            ]

        )
   

</script>

这是两个最简单的例子

参考链接 https://cn.vuejs.org/v2/guide/render-function.html