vue 3 + vite + ts tsx 语法

主要描述 vue3中 jsx的写法，写法习惯同 react

// 子组件 demo.ts
import { defineComponent, ref, reactive, onMounted } from 'vue'
export default defineComponent({
  props: {  // 父传子  子组件接收数据
    num: {
      type: Number,
      default: 0
    }
  },
  emits: ['change'], // 子传父 注册事件
  setup(props, { emit, attrs, slots，expose }) {  // 主要代码入口
    
    const state = reactive({
      name: 'vue3',
      count: 3
    })
    expose({state}) // 暴露子组件数据
    const ppt = ref(1)
    const add = () => {
      state.count++
    }
    return () => (<div>
      <h1>{props.num}++++ 父传子</h1>
      <div>{slots.default && slots.default(state)}</div>  // 默认插槽  埋点 并传入数据
      <hr />
      <div>{ slots.top && slots.top({ ppt: ppt.value }) }</div> // 具名插槽    埋点 并传入数据
      <span>{ppt.value}</span>
      <ul>                    // v-for   jsx 写法
        {[1, 2, 3, 4, 5, 6, 7, 8, 9].map(item => <li key={ item }>{ item }++++ v-for</li>)}
      </ul>
      <div>{ state.count > 100 ? <span>大于100</span> : <span>小于100</span> } ++++ v-if</div>  // v-if  jsx写法
      <div>{state.name} ++ 改变的数据</div>
      <div>{state.count}++</div>
      <a-input v-model:value={state.count} placeholder='请输入++++  v-model'></a-input>
      <a-button onClick={add}>add ++++ click</a-button>      // 使用on前缀，加方法  如 onClick onSubmit  还有自定义的emit方法 如onChange等   写法用小驼峰 
      <a-button onClick={() => emit('change', state.name)}>子传父 按钮</a-button>  // 按钮 触发子传父  改变父组件数据
    </div>)
  }
})

// 父组件   father.ts
import { defineComponent, ref } from 'vue'
import demo from './demo'  // 导入组件

export default defineComponent({
  components: { demo },   // 注册组件
  setup() {
    const num = ref(100)
    const tap = (s) => {  // 父组件定义的方法 用来改变组件内的数据 接收emit的参数改变值
      num.value = s
    }
    return () => (
      <div id='app'>
        <demo num={num.value} onChange={tap}>  // name 传给子组件的值   为onChange定义方法触发执行
          {{                                   // 插槽使用
            default: (data) => <div>{data.name} +++ 默认插槽</div>,  // 定义内部传入内容 默认
            top: (data) => <div>{data.ppt} 具名插槽</div>
          }}
        </demo>
      </div >
    )
  },
})