vue3.0實踐之寫tsx語法實例
更新時間：2022年07月14日 16:56:51 作者：小渣亮
很久不寫博客了,最近在使用ts和tsx開發(fā)vue類項目,網上資料比較少,順便記錄一下方便同樣開發(fā)的人互相學習共同進步,下面這篇文章主要給大家介紹了關于vue3.0實踐之寫tsx語法的相關資料,需要的朋友可以參考下
- 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節(jié)點
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的指向，并且不自覺調用函數，而是返回一個新的函數，可以傳遞參數，等待點擊的時候觸發(fā)事件
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發(fā)射事件，給父組件傳遞數據
}
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語法內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
在 Vue 中,append-to-body=“true” 主要用于一些第三方組件（如 Element UI 或 Ant Design Vue 中的彈出框、下拉菜單等）來控制組件的掛載位置,本文介紹Vue中控制組件的掛載位置,感興趣的朋友跟隨小編一起看看吧2024-12-12
Vue.js中,computed屬性根據依賴進行緩存,只有依賴改變時才重新計算,這樣有效提高性能,computed屬性是響應式的,可以自動更新,并且默認是只讀的,它與methods的主要區(qū)別在于計算屬性具有緩存性,而方法每次調用都會執(zhí)行,使用computed可以使模板更加簡潔,提高應用性能2024-09-09
這篇文章主要介紹了vue實現加載頁面自動觸發(fā)函數(及異步獲取數據)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
vue2.0中click點擊當前l(fā)i實現動態(tài)切換class
本篇文章主要介紹了vue2.0中click點擊當前l(fā)i實現動態(tài)切換class ，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要介紹了在vue中安裝使用vux的教程，本文給大家記錄了vuex的安裝使用過程，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-09-09
本文通過實例代碼給大家介紹了vue.js通過路由實現經典的三欄布局，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-07-07
在現代前端開發(fā)中,Vue.js 來作為一個流行的 JavaScript 框架,提供了簡單易用的 API 和強大的功能,在 Vue 3 中,“Props”和“Emit”是兩個核心概念,本文將詳細探討這兩個概念的工作原理,并提供示例代碼以幫助更好地理解它們的使用,需要的朋友可以參考下2024-11-11
這篇文章主要介紹了詳解Vue開發(fā)微信H5微信分享簽名失敗問題解決方案，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了vue-cli3中如何打包成zip壓縮文件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
VueX?mapGetters獲取Modules中的Getters方式
這篇文章主要介紹了VueX?mapGetters獲取Modules中的Getters方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08