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>
这是两个最简单的例子
参考链接
上一篇: python基础--字典