您现在的位置是：网站首页> 编程资料编程资料
vue3.0实践之写tsx语法实例_vue.js_
2023-05-24
377人已围观
简介 vue3.0实践之写tsx语法实例_vue.js_
- 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文件之中引入使用
tsx使用v-model指令 (App.tsx组件)
import { ref } from "vue" let test = ref("") const renderDom = () => { // 注意点：在tsx之中 不会自动读写 X.value return ( 我是{test.value } ) } export default renderDom 效果
使用v-show、与三目运算符
- tsx是支持v-show指令
- tsx不支持v-if、v-else指令，这时候需要使用到三目运算符了
import { ref } from "vue" let flag = ref(true) const renderDom = () => { // 注意点：在tsx之中 不会自动读写 X.value return ( 我是true我是flase { flag ? 我是true : 我是flase } ) } export default renderDom 效果
tsx之数组的遍历(map)
- tsx是不支持 v-for指令的
- 使用map的方式去遍历数组，然后map函数之中返回一个 div等标签渲染dom节点
import { reactive, ref } from "vue" let arr = reactive([1,2,3]) const renderDom = () => { return ( { arr.map((item,idx)=>{ return( { item } ) }) } ) } export default renderDom 效果
自定义属性 data-index
给当前标签自定义属性用于数据的传递
import { reactive, ref } from "vue" let arr = reactive([1,2,3]) const renderDom = () => { return ( { arr.map((item,idx)=>{ return( { item } ) }) } ) } export default renderDom 效果
tsx绑定事件
使用onClick定义事件
- 不传递参数的时候，直接定义这个click事件即可
- 若是传递参数的时候，需要使用bind来改变this的指向，并且不自觉调用函数，而是返回一个新的函数，可以传递参数，等待点击的时候触发事件
import { reactive, ref } from "vue" let arr = reactive([1,2,3]) const renderDom = () => { return ( { arr.map((item,idx)=>{ return( // { item } // 没有传参 // { item } // 直接调用 { item } ) }) } ) } const TestClick = (item)=>{ console.log("111",item); } export default renderDom tsx之 props父组件向子组件传递参数
App.vue 父
再vue之中，使用 v-bind的形式传递数据
App.tsx 子
import { reactive, ref } from "vue" type Props = { title : string } const renderDom = (props:Props) => { return ( 我是title - { props.title } ) } export default renderDom 效果
tsx之子组件 向父组件 传递数据
点击11 传递当前11数据
子组件 App.tsx
import { reactive, ref } from "vue" type Props = { title : string } let arr = reactive([11,22,33]) // props是接受父组件传递来的值，ctx：为上下文对象 const renderDom = (props:Props,ctx:any) => { return ( 我是title - { props.title } { arr.map((item,idx)=>{ return ( { item } ) }) } ) } // 点击事件 const itemClick = (ctx:any,item:any)=>{ ctx.emit("on-click",item) // 使用ctx之中的emit发射事件，给父组件传递数据 } export default renderDom App.vue 父
总结
到此这篇关于vue3.0实践之写tsx语法的文章就介绍到这了,更多相关vue3.0写tsx语法内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！
您可能感兴趣的文章:
