vue3 - 20.TSX语法

我们平时使用的通常的是template模板，但是vue3可以更好的拓展另一种风格的TSX语法

1.安装插件：

npm install @vitejs/plugin-vue-jsx -D

修改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()]
})

2.修改tsconfig.json配置：

"jsx": "preserve",
"jsxFactory": "h",
"jsxFragmentFactory": "Fragment",

3.使用tsx：

我们在根目录新建一个index.tsx:

const renderDom = () => {
    return (
        <div>
            <div>hello TSX</div>
        </div>
    )
}
export default renderDom

在需要引用的页面中引用index.tsx:

<template>
    <div>
        <renderDom></renderDom>
    </div>
</template>
<script setup lang='ts'>
    import renderDom from './index';
</script>

此时，我们在页面中就能看到通过tsx写的内容了

* 需要注意的是，在TSX中，所有的双花括号都要变成单花括号

TSX当中的一些基本常规定义方法：

v-model：

import { ref } from 'vue'

const msg = ref<string>('')

const renderDom = () => {
    return (
        <>
            <input type="text" v-model={msg.value} />
            <div>{msg.value}</div>
        </>
    )
}
export default renderDom

v-show：

import { ref } from 'vue'

const isShow = ref<boolean>(false)

const renderDom = () => {
    return (
        <>
            <div v-show={isShow.value}>AAA</div>
            <div v-show={!isShow.value}>BBB</div>
        </>
    )
}
export default renderDom

v-if：

* TSX不支持v-if，所以我们需要用函数式编程去实现

import { ref } from 'vue'

const isShow = ref<boolean>(true)

const renderDom = () => {
    return (
        <>
            {
                isShow.value == true ? <div>AAA</div> : <div>BBB</div>
            }
        </>
    )
}
export default renderDom

v-for：

* TSX不支持v-for，所以我们需要用函数式编程去实现

import { ref } from 'vue'

const dataList = ['aaa','bbb','ccc','ddd']
const dataItem = [
    {
        shopName:"TypeScript入门指南",
        shopPrice:42,
        publish:"清华出版社"
    },{
        shopName:"Vue3入门指南",
        shopPrice:36,
        publish:"人民出版社"
    }
]

const renderDom = () => {
    return (
        <>
            <div>
                {
                    dataList.map(item => {
                        return <div>{item}</div>
                    })
                }
            </div>
            <div>
                {
                    dataItem.map(item => {
                        return <div>
                            <div>{item.shopName}</div>
                            <div>{item.shopPrice}</div>
                            <div>{item.publish}</div>
                            <br />
                        </div>
                    }) 
                }
            </div>
        </>
    )
}
export default renderDom

v-bind：

import { ref } from 'vue'

const dataList = ['aaa','bbb','ccc','ddd']
const dataItem = [
    {
        shopName:"TypeScript入门指南",
        shopPrice:42,
        publish:"清华出版社"
    },{
        shopName:"Vue3入门指南",
        shopPrice:36,
        publish:"人民出版社"
    }
]

const renderDom = () => {
    return (
        <>
            <div>
                {
                    dataList.map((item,index) => {
                        return <div data-arr={index}>{item}</div>
                    })
                }
            </div>
            <div>
                {
                    dataItem.map((item,index) => {
                        return <div data-arr={index}>
                            <div>{item.shopName}</div>
                            <div>{item.shopPrice}</div>
                            <div>{item.publish}</div>
                            <br />
                        </div>
                    }) 
                }
            </div>
        </>
    )
}
export default renderDom

v-on：

* 所有的事件前面都有on，并且驼峰，所有on后面的首字母都是大写：如: onClick / onChange / onInput ……

const renderDom = () => {
    return (
        <>
            <button onClick={handleClick}>Click here</button>
        </>
    )
}
const handleClick = () => {
    console.log(123)
}
export default renderDom

案例1：（定义class类名 / 定义css内联样式 / 点击事件(传参) / 数据循环）

const dataItem = [
  {
    shopId: 10001,
    shopName: "秋季精品男装-阿迪达斯外套",
    shopPrice: 1300,
  },
  {
    shopId: 10002,
    shopName: "kappa-休闲运动裤",
    shopPrice: 750,
  },
  {
    shopId: 10003,
    shopName: "三叶草-黑色休闲运动鞋",
    shopPrice: 600,
  },
];
const cssStyle = `
    .shopItem {
        padding:20px;
    }
`
const renderDom = () => {
  return (
    <>
      <div>
        {dataItem.map((item, index) => {
          return (
            <div
              data-no={item.shopId}
              style={{ marginBottom: "20px" }}
              onClick={handleItem.bind(this, item)}
              className='shopItem'
            >
              <div>商品名称：{item.shopName}</div>
              <div>商品价格：{item.shopPrice}</div>
            </div>
          );
        })}
      </div>
      <style>{ cssStyle }</style>
    </>
  );
};
const handleItem = (data: any) => {
  console.log(data);
};
export default renderDom;

Props 父子传参：

父组件：

<template>
    <div>
        <renderDom msg="hello world"></renderDom>
    </div>
</template>
<script setup lang='ts'>
    import renderDom from './index';
</script>

子组件：

type Props = {
    msg:string
}

const renderDom = (getProps:Props) => {
    return (
        <>
            <div>{getProps.msg}</div>
        </>
    )
}
export default renderDom

emit 子父组件传参：

父组件：

<template>
    <div>
        <renderDom @emitHandle="emitHandle"></renderDom>
    </div>
</template>
<script setup lang='ts'>
    import renderDom from './index';
    const emitHandle = (data:string) => {
        console.log(data)
    }
</script>

子组件：

type Props = {}
const renderDom = (props:Props,value:any) => {
    return (
        <>
            <button onClick={emitHan.bind(this,value)}>emit to</button>
        </>
    )
}
export default renderDom
const emitHan = (ctx:any) => {
    console.log(ctx)
    ctx.emit('emitHandle','abcde')
}