vue3.0实践之写tsx语法实例
更新时间：2022年07月14日 16:56:51 作者：小渣亮
很久不写博客了,最近在使用ts和tsx开发vue类项目,网上资料比较少,顺便记录一下方便同样开发的人互相学习共同进步,下面这篇文章主要给大家介绍了关于vue3.0实践之写tsx语法的相关资料,需要的朋友可以参考下
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
- 00：下载
yarn add @vitejs/plugin-vue-jsx -D
- 01：引入
- vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(),vueJsx()]
})
02：tsconfig.json 配置文件
"jsx": "preserve",
"jsxFactory": "h",
"jsxFragmentFactory": "Fragment",
经过上述的配置就可以使用 ts了
测试tsx 新建一个App.tsx页面
再App.vue文件之中引入使用
<template>
<!-- <Layout></Layout> -->
<renderDom />
</template>
<script setup lang="ts">
// import Layout from './layout/Layout.vue'
import renderDom from './App.tsx'
</script>
<style lang="scss">
html,
body,
#app {
height: 100%;
width: 100%;
overflow: hidden;
}
</style>
tsx使用v-model指令 (App.tsx组件)
import { ref } from "vue"
let test = ref<string>("")
const renderDom = () => {
// 注意点：在tsx之中 不会自动读写 X.value
return (
<div>
<input type="text" v-model={test.value} />
<div>我是{test.value }</div>
</div>
)
}
export default renderDom
效果
使用v-show、与三目运算符
- tsx是支持v-show指令
- tsx不支持v-if、v-else指令，这时候需要使用到三目运算符了
import { ref } from "vue"
let flag = ref<Boolean>(true)
const renderDom = () => {
// 注意点：在tsx之中 不会自动读写 X.value
return (
<div>
<div v-show={flag}>我是true</div>
<div v-show={!flag}>我是flase</div>
<div>
{
flag ? <div>我是true</div> : <div>我是flase</div>
}
</div>
</div>
)
}
export default renderDom
效果
tsx之数组的遍历(map)
- tsx是不支持 v-for指令的
- 使用map的方式去遍历数组，然后map函数之中返回一个 div等标签渲染dom节点
import { reactive, ref } from "vue"
let arr = reactive<Number[]>([1,2,3])
const renderDom = () => {
return (
<div>
<div>
{
arr.map((item,idx)=>{
return(
<div key={idx}>{ item }</div>
)
})
}
</div>
</div>
)
}
export default renderDom
效果
自定义属性 data-index
给当前标签自定义属性用于数据的传递
import { reactive, ref } from "vue"
let arr = reactive<Number[]>([1,2,3])
const renderDom = () => {
return (
<div>
<div>
{
arr.map((item,idx)=>{
return(
<div key={idx} data-index={idx}>{ item }</div>
)
})
}
</div>
</div>
)
}
export default renderDom
效果
tsx绑定事件
使用onClick定义事件
- 不传递参数的时候，直接定义这个click事件即可
- 若是传递参数的时候，需要使用bind来改变this的指向，并且不自觉调用函数，而是返回一个新的函数，可以传递参数，等待点击的时候触发事件
import { reactive, ref } from "vue"
let arr = reactive<Number[]>([1,2,3])
const renderDom = () => {
return (
<div>
<div>
{
arr.map((item,idx)=>{
return(
// <div key={idx} data-index={idx} onClick={TestClick}>{ item }</div> // 没有传参
// <div key={idx} data-index={idx} onClick={TestClick()}>{ item }</div> // 直接调用
<div key={idx} data-index={idx} onClick={TestClick.bind(this,item)}>{ item }</div>
)
})
}
</div>
</div>
)
}
const TestClick = (item)=>{
console.log("111",item);
}
export default renderDom
tsx之 props父组件向子组件传递参数
App.vue 父
再vue之中，使用 v-bind的形式传递数据
<template>
<renderDom :title="title" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import renderDom from './App.tsx'
let title = ref<String>('我是测试的t')
</script>
App.tsx 子
import { reactive, ref } from "vue"
type Props = {
title : string
}
const renderDom = (props:Props) => {
return (
<div>
<div>我是title - { props.title }</div>
</div>
)
}
export default renderDom
效果
tsx之子组件 向父组件 传递数据
点击11 传递当前11数据
子组件 App.tsx
import { reactive, ref } from "vue"
type Props = {
title : string
}
let arr = reactive<number[]>([11,22,33])
// props是接受父组件传递来的值，ctx：为上下文对象
const renderDom = (props:Props,ctx:any) => {
return (
<div>
<div>我是title - { props.title }</div>
<div>
{
arr.map((item,idx)=>{
return (
<div onClick={ itemClick.bind(this,ctx,item) }>{ item }</div>
)
})
}
</div>
</div>
)
}
// 点击事件
const itemClick = (ctx:any,item:any)=>{
ctx.emit("on-click",item) // 使用ctx之中的emit发射事件，给父组件传递数据
}
export default renderDom
App.vue 父
<template>
<!-- <Layout></Layout> -->
<renderDom :title="title" @on-click="getData" />
</template>
<script setup lang="ts">
// import Layout from './layout/Layout.vue'
import { ref } from 'vue'
import renderDom from './App.tsx'
let title = ref<String>('我是测试的t')
// 接受子组件 自定义事件 传递来的数据
const getData = (parmas) => {
console.log('getData', parmas)
}
</script>
总结
到此这篇关于vue3.0实践之写tsx语法的文章就介绍到这了,更多相关vue3.0写tsx语法内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家！
相关文章
这篇文章主要介绍了vue 动态样式绑定 class/style的写法小结,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-03-03
vue3解决了vue2的一些缺陷与弊端，学习新的技术是很有必要的，本文总结了一些vue3的优点，希望各位能尽快转入vue3的使用中2021-06-06
Vue框架很核心的功能就是双向的数据绑定。下面这篇文章主要给大家介绍了关于Vue.js中数据绑定的语法教程，文中通过示例代码介绍的非常详细，相信对大家具有一的参考学习价值，需要的朋友们下面来一起看看吧。2017-06-06
这篇文章主要为大家详细介绍了vue自定义可选时间的日历组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
关于Element上传组件beforeUpload上传前限制失效问题
这篇文章主要介绍了Element上传组件beforeUpload上传前限制失效问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要介绍了Vue2中无法监听数组和对象的某些变化问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
viewer.js是一款开源的图片预览插件,功能十分强大,本文主要介绍了vue3中使用viewerjs实现图片预览效果的项目实践,具有一定的参考价值,感兴趣的可以了解一下2023-09-09
这篇文章主要介绍了vue.js浅度监听和深度监听及watch用法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧2018-08-08
这篇文章主要介绍了用vue 实现手机触屏滑动的功能，文中通过示例代码给大家介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
这篇文章主要介绍了sortable+element 实现表格行拖拽的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-06-06
最新评论