安装对应的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文件即可