[vue3.x] [2021-03-31 更新] vue3使用jsx渲染以及注意点

[jeddygong]

安装对应的babel

npm install @vue-plugin-jsx -D

babel配置: 在文件.babelrc 或者 babel.config.js中添加

{
    "plugins": ["@vue/babel-plugin-jsx"]
}

写法：

// 在App.tsx文件中编写    

import { definedComponent, reactive } from "vue";

export default definedComponent({
  setup(){
    const state = reactive({
      name: 'jeddy',
      age: 18,
      img: '...'
    });

    return () => {
      const { name, img } = state;
      return (
        <div id="app">
            <img src={state.img}/>
          <span>{state.name}</span>
            <input type="text" v-model={state.name}/>
          {亦可以写成一个函数}
        </div>
      )
    }
  }
})

注意：

// 如果传入的组件中的props是必传的required: true；
// 如果不传，编辑器是不会提示错误，这是因为definedComponent在.d.ts中定义的时候已经固定类型了；
// 解决：需要把对应的.vue文件改成.tsx文件即可