vue3的tsx语法使用

v-if使用三元表达式

 {/* v-if */}
<div>
   {flag.value ? <div>正确的</div> : <div>错误的</div>}
</div>

v-for使用map

{/* v-for */}
<div>
   {arr.value.map((item: any, i: number) => {
         return (
          <div onClick={clickIndex.bind(this, i)}>
        {item.name}
    </div>
     )
   })}
</div>

props和emit

{/* props */}
 <div>props:{props?.name}</div>
  {/* slot */}
 <hr />

插槽：声明A组件，然后定义a组件的数据，必须v-slots

const A = (_, { slots }) => (
    <div>{slots.default ? slots.default() : '默认值'}</div>
)

const slot = { default: () => (<div>slot插槽</div>) }
<A v-slots={slot}></A>

完整代码 app.vue

<template>
  <div>
    <RouterView></RouterView>
    <Tsx name="我是props" @on-click="handler"></Tsx>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import Tsx from '../src/views/tsx/index'
const handler = (item:any)=>{
  console.log('first', item)
}
</script>
<style lang='scss' scoped>
</style>

app.tsx

interface Props {
    name?: string
}

const A = (_, { slots }) => (
    <div>{slots.default ? slots.default() : '默认值'}</div>
)

import { defineComponent, ref, reactive } from "vue";
export default defineComponent({
    props: {
        name: String
    },
    emits: ['on-click'],
    setup(props: Props, { emit }) {
        const flag = ref(true)
        const arr = ref([{
            id: 1,
            name: '111'
        }, {
            id: 2,
            name: '22'
        }])
        const clickIndex = (i: any) => {
            alert(i);
            emit('on-click', i)
        }
        const slot = { default: () => (<div>slot插槽</div>) }
        return () => (
            <>
                <div>使用tsx</div>

                {/* v-if */}
                <div>
                    {flag.value ? <div>正确的</div> : <div>错误的</div>}
                </div>

                {/* v-for */}
                <div>
                    {arr.value.map((item: any, i: number) => {
                        return (
                            <div onClick={clickIndex.bind(this, i)}>
                                {item.name}
                            </div>
                        )
                    })}
                </div>
                {/* props */}
                <div>props:{props?.name}</div>
                {/* slot */}
                <hr />
                <A v-slots={slot}></A>
            </>
        )
    }
})