vue3+vite使用jsx和tsx详情
作者:Agwenbi 发布时间:2024-05-10 14:15:47
标签:vue3,vite,jsx,tsx
安装@vitejs/plugin-vue-jsx
yarn add -D @vitejs/plugin-vue-jsx
npm i -D @vitejs/plugin-vue-jsx
配置vite.config.js
...
import vueJsx from '@vitejs/plugin-vue-jsx';
export default defineConfig({
? plugins: [vueJsx(), ...],
? ...
})
使用实战
新建xxx.tsx或者xxx.jsx,注意不再是vue为后缀
第一种写法使用this
使用了this,个人不太推荐
import { defineComponent, ref } from 'vue';
export default defineComponent({
? setup(){
? ? const str = ref<string>('tsx的使用');
? ? const clickFunc1 = () => {
? ? ? console.log('没有参数');
? ? }
? ? const clickFunc2 = (msg: string = '默认值') => {
? ? ? console.log(msg);
? ? }
? ? return {
? ? ? str,
? ? ? clickFunc1,
? ? ? clickFunc2
? ? };
? },
? render(){
? ? return (
? ? ? <>
? ? ? ? <div class='async'>{this.str}</div>
? ? ? ? <button onClick={this.clickFunc1}>不传参数点击</button>
? ? ? ? <button onClick={() => this.clickFunc2('额外参数')}>传参数点击</button>
? ? ? </>
? ? );
? }
})
第二种写法
函数体等价于setup,此方式无法获取到props与emits等等(可能我没有了解到),存在交互性强的也不建议使用,否则可以考虑
import { defineComponent, ref } from 'vue';
export default defineComponent(() => {
? const str = ref<string>('tsx的使用');
? const clickFunc1 = () => {
? ? console.log('没有参数');
? }
? const clickFunc2 = (msg: string = '默认值') => {
? ? console.log(msg);
? }
? const render = (
? ? <>
? ? ? <div class='async'>{str.value}</div>
? ? ? <button onClick={clickFunc1}>不传参数点击</button>
? ? ? <button onClick={() => clickFunc2('额外参数')}>传参数点击</button>
? ? </>
? );
? return () => render;
})
第三种写法
比较推荐这种写法
import { defineComponent, ref } from 'vue';
export default defineComponent({
? props: {
? ? params: {
? ? ? type: Object,
? ? ? default: () => {}
? ? }
? },
? setup(props){
? ? const str = ref<string>('tsx的使用');
? ? const clickFunc1 = () => {
? ? ? console.log('没有参数');
? ? }
? ? const clickFunc2 = (msg: string = '默认值') => {
? ? ? console.log(msg);
? ? ? console.log(props);
? ? }
? ? return () => (
? ? ? <>
? ? ? ? <div class='async'>{str.value}</div>
? ? ? ? <button onClick={clickFunc1}>不传参数点击</button>
? ? ? ? <button onClick={() => clickFunc2('额外参数')}>传参数点击</button>
? ? ? </>
? ? );
? }
})
来源:https://blog.csdn.net/Ag_wenbi/article/details/122210248
0
投稿
猜你喜欢
- 运行环境: python 3.6.0今天处于练习的目的,就用 python 写了一个百度翻译,是如何做到的呢,其实呢就是拿到接口,通过这个接
- //重新封装document对象 var Console={ Write:function(msg){alert(msg);} }; //P
- 这里是一个使用日期函数的例子。下面的查询选择了所有记录,其date_col的值是在最后30天以内: mysql> SELECT som
- 对List进行排序,Python提供了两个方法方法1.用List的内建函数list.sort进行排序list.sort(func=None,
- 排序是个很泛的概念,而且根据被排序的数据量排序方法和侧重又有很大的不同。因此一直没想到从何着手。今天把玩iphone的时候突然又想到这个问题
- 前言对于文件的比较一般有几种,比如比较文件的内容,比较文件的大小,或者直接对比整个项目文件。特别是在项目的更新迭代中,可以通过该库来比较当前
- 废话不多说,直接上代码吧!/** * 函数防抖 (只执行最后一次点击) * @param fn * @param delay * @retu
- 1、在Django配置搜索结果页的路由映射"""pachong URL Configuration
- pycharm设置Console控制台输出自动换行解决方法File --> Settings… --> E
- 在IDLE下清屏:#网上有些先定义函数,再?print("\n" * 100)输出一百个换行的方法有点扯淡,跟连按回车没
- PyCharm是一种Python IDE,带有一整套可以帮助用户在使用Python语言开发时提高其效率的工具,比如调试、语法高亮、Proje
- 本人最近在做一个GUI项目时,需要用到matplotlib画图,写完代码运行时,发现所需要画图功能不能正常使用,在触发画图事件后,画布未更新
- 本文使用python的第三方模块requests爬取王者荣耀所有英雄的图片,并将图片按每个英雄为一个目录存入文件夹中,方便用作桌面壁纸下面时
- 下策——查询出结果后将时间排序后取第一条select * from a where create_time<="2017-0
- 先由exp把数据卸出到文件系统, 产生一个.dmp文件, 然后必要时再由imp将数据装入数据库. 对于一般中小型数据库来说, 全数据库的ex
- 支持按照文件夹去批量处理,也可以单独一个文件进行处理,并且可以自定义标识符最近在开发一个答题类的小程序,到了录入试题进行测试的时候了,发现一
- 背景最近在测试一款软件的关闭第三方窗口的功能,感觉实现应该挺简单的。所以就尝试了。由于说它的实现是靠c++实现的,本人对c++实在不在行,但
- 如下所示:>> type(np.newaxis)NoneType>> np.newaxis == NoneTruen
- 01、介绍在编程语言中,字符串是一种重要的数据结构。在 Golang 语言中,因为字符串只能被访问,不能被修改,所以,如果我们在 Golan
- asp三天学好ADO对象之第二天 今天来说一下Recordset对象的一些方法。1、AddNew 方法创建可更新 Recordset 对象的