1、vue2.7中
使用webpack处理，配置如下
{
test: /\.(ts|tsx)$/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@vue/babel-preset-jsx']
}
},
{
loader: 'ts-loader',
options: {
appendTsSuffixTo: [/\.vue$/] // vue文件加上ts
}
}
]
}index.tsx
// MyComponent.tsx
import { CreateElement, ref, defineComponent } from 'vue';
// Vue3中没有Vue.extend，可以用defineComponent来代替
export default defineComponent({
name: 'JsxDemo',
data () {
return {
num: 0
};
},
setup (_props, { expose }) {
const num = ref(0); // 注意：父组件中ref修改响应数据，无法导致num刷新
const name = ref('ike');
const handleClick = () => {
console.log('点击');
num.value++;
name.value = 'tom';
};
expose({ // 默认只会暴露属性，故需要expose暴露
num,
handleClick
});
return (h: CreateElement) => (
<div>
<h1>{name.value}</h1>
<h1 onClick={handleClick}>Hello, Vue 2.7 with TSX! {num.value}</h1>
</div>
);
}
// render (h: CreateElement) {
// const handleClick = () => {
// console.log('点击');
// };
// return (
// <div>
// <h1 onClick={handleClick}>Hello, Vue 2.7 with TSX! {{ this.num }}</h1>
// </div>
// );
// }
});
如果想在vue文件使用tsx，实测用render渲染函数会报错，目前没找到解决办法
tsconfig.json中配置，防止编辑器报没有React的错误
"jsx": "preserve",
"jsxFactory": "h",
"jsxFragmentFactory": "Fragment",
2、vue3.x中
使用vite处理，需要安装@vitejs/plugin-vue-jsx插件即可
vite.config.ts里面加上
import vueJsx from '@vitejs/plugin-vue-jsx'
export default defineConfig({
base: './',
plugins: [
vue(),
vueJsx() // jsx、tsx都用插件
]
})
import { defineComponent, reactive, version } from 'vue';
import './index.scss';
// export default defineComponent({
// name: 'tsxInVue',
// components: {},
// props: {},
// data() {
// return {
// info: {
// age: 18,
// gender: ''
// }
// }
// },
// computed: {},
// watch: {},
// mounted(){},
// methods: {
// gender() {
// this.info.gender = this.info.gender === '男' ? '女' : '男'
// }
// },
// render() {
// return <div className="box-wrap-intsx">
// <div>我是小明，我今年{this.info.age}(tsx in tsx)</div>
// <div onClick={this.gender}>我是{this.info.gender}性（点击获取性别）</div>
// </div>
// }
// });
console.log('version', version);
export default defineComponent({
name: 'tsxInVue',
components: {},
props: {},
data() {
return {}
},
computed: {},
watch: {},
mounted(){},
methods: {},
setup() {
const info = reactive({
gender: '男',
age: 22
})
const handleGender = () => {
info.gender = info.gender === '男' ? '女' : '男'
};
return () => <div className="box-wrap-intsx">
<div>我是小明，我今年{info.age}(tsx in tsx)</div>
<div onClick={handleGender}>我是{info.gender}性（点击获取性别）</div>
</div>
}
});
