vue3+vite使用jsx和tsx详情

 更新时间:2022年05月31日 09:03:34   作者:Agwenbi  
这篇文章主要介绍了vue3+vite使用jsx和tsx详情,文章通过安装@vitejs/plugin-vue-jsx展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下

安装@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>
      </>
    );
  }
})

到此这篇关于vue3+vite使用jsx和tsx详情的文章就介绍到这了,更多相关vue3 jsx/tsx内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue打包后出现一些map文件的解决方法

    Vue打包后出现一些map文件的解决方法

    本篇文章主要介绍了Vue打包后出现一些map文件的解决方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • Vue动态组件实现异常处理方法

    Vue动态组件实现异常处理方法

    Vue3动态组件怎么进行异常处理?下面本篇文章带大家聊聊Vue3 动态组件异常处理的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2023-02-02
  • Vue echarts@4.x中国地图及AMap相关API使用详解

    Vue echarts@4.x中国地图及AMap相关API使用详解

    这篇文章主要为大家介绍了Vue使用echarts@4.x中国地图及AMap相关API使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-12-12
  • 详解Vue之事件处理

    详解Vue之事件处理

    这篇文章主要介绍了Vue之事件处理的相关资料,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下。
    2020-07-07
  • 使用vue+element ui实现走马灯切换预览表格数据

    使用vue+element ui实现走马灯切换预览表格数据

    这次做项目的时候遇到需要切换预览表格数据的需求,所以下面这篇文章主要给大家介绍了关于使用vue+element ui实现走马灯切换预览表格数据的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • Vue自定义全局弹窗组件操作

    Vue自定义全局弹窗组件操作

    这篇文章主要介绍了Vue自定义全局弹窗组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue实现简单的登录弹出框

    vue实现简单的登录弹出框

    这篇文章主要为大家详细介绍了vue实现简单的登录弹出框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-10-10
  • vue.js实现选项卡切换

    vue.js实现选项卡切换

    这篇文章主要为大家详细介绍了vue.js实现选项卡切换功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • 想到头秃也想不到的Vue3复用组件还可以这么hack的用法

    想到头秃也想不到的Vue3复用组件还可以这么hack的用法

    这篇文章主要为大家介绍了想到头秃也想不到的Vue3复用组件还可以这么hack的用法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • vue3+vite+axios 配置连接后端调用接口的实现方法

    vue3+vite+axios 配置连接后端调用接口的实现方法

    这篇文章主要介绍了vue3+vite+axios 配置连接后端调用接口的实现方法,在vite.config.ts文件中添加配置,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-12-12

最新评论