vue3中tsx的基本语法使用

注意：如需在vue3中配置tsx的环境，请点击这里
注意：以下的教程均会以第三种写法来写

事件及修饰符的使用

经测试，capture、once 和 passive三个事件修饰符必须使用链接模式，使用withModifiers不生效（后续vue版本更新后有可能可以，目前这里是暂时不行，当前教程vue版本：3.2.37）

import { defineComponent, ref, withModifiers } from "vue";
export default defineComponent({
  setup(){
    const num = ref<number>(0);
    const addNum = () => {
      num.value += 1;
    }
    return () => (
      <div>
        <div>{num.value}</div>
        // 基本事件
        <button onClick={addNum}>加1</button>
        // once事件修饰符，但ts可能会报警告
        <button onClickOnce={addNum}>我只会触发一次</button>
        // once事件修饰符与capture事件修饰符链式使用
        <button onClickOnceCapture>多个事件修饰符</button>
        // 阻止事件传递及按键ctrl才能触发
        <button onClick={withModifiers(addNum, ['stop', 'ctrl'])}>withModifiers的使用</button>
      </div>
    );
  }
})

v-model的使用

语法：v-model={[‘传递的数据’, ‘如果不设置我，默认是modelValue’, [‘修饰符，可多个’]]}

//父组件
import { defineComponent, ref } from "vue";
import ChildCom from '@/components/child/index';
export default defineComponent({
  setup(){
    const num = ref<number>(0);
    const addNum = () => {
      num.value += 1;
    }
    return () => (
      <div>
        <div>我是tsx{num.value}</div>
        <button onClick={addNum}>父组件加1</button>
        <ChildCom v-model={[num.value, 'num']} />
      </div>
    );
  }
});
//子组件
import { defineComponent } from "vue";
export default defineComponent({
  props: {
    num: {
      type: Number,
      default: 0
    }
  },
  emits: ['update:num'],
  setup(props, { emit }){
    const addNum = () => {
      emit('update:num', props.num + 1);
    }
    return () => (
      <div>
        <div>{props.num}</div>
        <button onClick={addNum}>子组件加1</button>
      </div>
    );
  }
})

插槽的使用

1.匿名插槽

// 父组件
import { defineComponent } from "vue";
import ChildCom from '@/components/child/index';
export default defineComponent({
  setup(){
    return () => (
      <div>
        <ChildCom>匿名插槽的使用</ChildCom>  // 匿名插槽的话我个人喜欢这种
        // 或者
        <ChildCom>{() => '匿名插槽的使用'}</ChildCom>        
      </div>
    );
  }
})
// 子组件
import { defineComponent } from "vue";
export default defineComponent({
  setup(props, { slots }){
    return () => (
      <>
        <div>{ slots.default ? slots.default() : '' }</div>
      </>
    );
  }
})

2.具名插槽

// 父组件
import { defineComponent } from "vue";
import ChildCom from '@/components/child/index';
export default defineComponent({
  setup(){
    return () => (
      <div>
        <ChildCom>{{
          default: () => <h5>默认插槽</h5>,
          aaa: () => <h4>具名插槽</h4>
        }}</ChildCom>
      </div>
    );
  }
})

3.插槽传值

// 父组件
import { defineComponent } from "vue";
import ChildCom from '@/components/child/index';
export default defineComponent({
  setup(){
    return () => (
      <div>
        <ChildCom>{{
          default: () => <h5>默认插槽</h5>,
          aaa: ({num}: {num: number}) => <h4>具名插槽值为：{num}</h4>
        }}</ChildCom>
      </div>
    );
  }
})
// 子组件
import { defineComponent, ref } from "vue";
export default defineComponent({
  setup(props, { slots }){
    const num = ref<number>(0);
    const addNum = () => {
      num.value++;
    }
    return () => (
      <>
        <div>{ slots.default ? slots.default() : '' }</div>
        <div>{ slots.aaa ? slots.aaa({num: num.value}) : '' }</div>
        <button onClick={addNum}>点我改变插槽名为aaa的值</button>
      </>
    );
  }
})

自定义指令的使用

实现一个指令，使文本框自动获得焦点，如果传递了延迟时间，则延迟指定时间后获得焦点

// main.ts
import { createApp, Directive } from 'vue'
import App from './App'

const inputFocus: Directive<HTMLInputElement> = {
  mounted(el, binding){
    const value = isNaN(binding.value) ? 0 : binding.value
    console.log(binding.modifiers) // 修饰符
    const arg = typeof binding.arg === 'boolean' ? binding.arg : false // 如果传递了arg参数，且为true，则五秒后获得焦点
    if(arg){
      setTimeout(() => {
        el.focus && el.focus();
      }, 5000);
      return
    }
    setTimeout(() => {
      el.focus && el.focus();
    }, value);
  }
}
const app = createApp(App)
app.directive('inputFocus', inputFocus);
app.mount('#app')


// App.tsx
import { defineComponent, ref } from "vue";
export default defineComponent({
  setup(){
    const bol = ref(true)
    return () => (
      <div>
        <div>默认情况：<input v-inputFocus /></div>
        <div>延迟2s：<input v-inputFocus={2000} /></div>
        <div>arg参数情况：<input v-inputFocus={[2000, bol.value]} /></div>
        // 语法格式为 v-xxx={[value, arg, ['modifiers1', 'modifiers2', ...]]}
      </div>
    );
  }
})