欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue中jsx的最简单用法

程序员文章站 2022-03-20 22:22:42
最终页面显示效果为 主页面 parent.vue 子页面child.vue有两种方法 第一种 第二种 这是两个最简单的例子 参考链接 https://cn.vuejs.org/v2/guide/render-function.html ......

最终页面显示效果为

<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>

这是两个最简单的例子

参考链接