Vue中jsx的最简单用法

系统管理员 2023-06-03 04:50 1阅读 0赞

最终页面显示效果为

<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][https_cn.vuejs.org_v2_guide_render-function.html]

转载于:https://www.cnblogs.com/ttjm/p/11350988.html

[https_cn.vuejs.org_v2_guide_render-function.html]: https://cn.vuejs.org/v2/guide/render-function.html

发表评论取消回复

表情：

评论列表（有 0 条评论，1人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue中$event的用法

因为在Vue API文档里$event的用法找不到，所以我自己总结了一下。通常的用法是用来获取当前元素的最新值。`$event.target.value` <bo

「爱情、让人受尽委屈。」/ 2023年07月03日 10:49/ 0 赞/ 56 阅读

相关 Vue中jsx的最简单用法

最终页面显示效果为 <div class="open-service" style="color: 0199f0; cursor: pointer;">

系统管理员/ 2023年06月03日 04:50/ 0 赞/ 2 阅读

相关 vue中prop的用法

prop的大小写 HTML 中的 `attribute` 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelC

骑猪看日落/ 2023年03月01日 09:04/ 0 赞/ 122 阅读

相关在Vue 中使用 JSX 语法

Vue 中构建虚拟DOM可以直接使用渲染函数构建虚拟Dom，正常情况下用render函数的参数createElement方法构建虚拟Dom的语法比较繁琐，更方便的是用更接近于模

矫情吗；*/ 2023年01月13日 09:58/ 0 赞/ 139 阅读

相关探索 Vue 3 中的 JSX

???? 加个关注，后续上新不错过~ > 本文为 Vue Conf 2021 分享内容。 > > 分享者：林成璋，目前就职于字节跳动大力智能前端团队 1. 引言

浅浅的花香味﹌/ 2022年10月05日 15:52/ 0 赞/ 140 阅读

相关 Vue中ref的用法

基本用法 <div id="app"> <input type="text" ref="input1"/> <button @click="add">添加

比眉伴天荒/ 2022年05月18日 05:00/ 0 赞/ 306 阅读

相关 LaTeX的最简单用法

点击CSDN写博客的编辑界面工具栏中的Σ按钮，就可以插入LaTeX代码了。左为效果，右为代码，中间用四个空格分隔四则运算 ![\+][gif.latex_plus]

àì夳堔傛蜴生んèń/ 2022年02月01日 14:39/ 0 赞/ 280 阅读

相关 vue中$emit的用法

1、父组件可以使用 props 把数据传给子组件。 2、子组件可以使用 $emit 触发父组件的自定义事件。 vm.$emit( event, arg ) //触发当前实

野性酷女/ 2021年12月22日 05:51/ 0 赞/ 308 阅读

相关 vue 中用法

1.v-for和data属性 <li v-for="(item, index) in message" v-on:click="addClassFun(inde

我不是女神ヾ/ 2021年12月03日 15:07/ 0 赞/ 408 阅读

相关 vue中localstorage的用法

vue中需要将内容存储到本地缓存中 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0

àì夳堔傛蜴生んèń/ 2021年07月26日 02:16/ 0 赞/ 689 阅读