search.png
关于我
 menu.png
Vue3 JSX体验

6啊，vue3

vite创建的app自动支持了jsx语法。但是注意jsx代码要用.jsx文件结尾。

https://github.com/vuejs/jsx-next

一切尽在代码中：

TestJsx.jsx

import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const a = ref('xxxxxxxxxxxxxxxxxxx');
    return () => (
      <a>{a.value}</a>
    )
  }
})

HelloWorld.vue

<template>
  <h1>{{ msg }}</h1>
  <button @click="count++">count is: {{ count }}</button>
  <TestJsx/>
</template>

<script lang='ts'>
import {defineAsyncComponent, defineComponent} from 'vue';

export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: String
  },
  components: {
    TestJsx: defineAsyncComponent(() => import('./TestJsx.jsx'))
  },
  data() {
    return {
      count: 0
    }
  }
})
</script>

版权声明

知识共享许可协议 本文章由作者“衡于墨”创作，转载请注明出处，未经允许禁止用于商业用途

本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。
发布时间：2021年02月19日 17:16:51

评论区#

还没有评论哦，期待您的评论！

备案号： 闽ICP备19015193号-1 
关闭特效