vue3中JSX/TSX的使用方法

文本插值

在模版语法中，采用的是双大括号语法{{}}来讲变量进行包裹，在JSX/TSX中，我们采用单括号{}将其包裹

import { defineComponent, ref } from "vue";
export default defineComponent({
  setup(props, ctx) {
    const text = ref("Hello World");
    return () => (<div>{text.value}</div>);
  },
});

条件渲染

v-if

在模版语法中，我们使用v-if来进行条件判断，进而显示某个内容，比如：

<h1 v-if="awesome">Vue is awesome!</h1>

但是在tsx/jsx中是没有v-if这么一个指令的，而是使用的JS中的三元表达式。

import { defineComponent, ref } from "vue";
export default defineComponent({
    setup(props, ctx) {
        const isShow = ref(true);
        return () => (<div>{isShow.value ? <div>Hello World</div> : <div>No Hello World</div>}</div>;)
    },
});

v-show

在jsx/tsx中，仍然存在v-show的指令，使用的方法有点类似

import { defineComponent, ref } from "vue";
export default defineComponent({
    setup(props, ctx) {
        const isShow = ref(true);
        return () => (
            <div>
                <div v-show={isShow.value}>Hello World</div>
                <div v-show={!isShow.value}>No Hello World</div>
            </div>
        );
    },
});

循环渲染(v-for)

在模版语法中，我们使用v-for来进行列表渲染。

<ul>
  <li v-for="{ index, item } in list" :key="index">{{ item }}</li>
</ul>

但是在jsx/tsx中，我们采用的是使用map方法。

import { defineComponent, ref } from "vue";
export default defineComponent({
  setup(props, ctx) {
    const list = ref(["1", "2", "3"]);
    return () => (
      <div>
        {list.value.map((item, index) => (
          <div key={index}>{item}</div>
        ))}
      </div>
    );
  },
});

记得返回值，另外也要绑定key值

事件

在jsx中，我们将@click替换成onClick

内联事件

import { defineComponent } from "vue";
export default defineComponent({
  setup(props, ctx) {
    return () => (
      <div
        onClick={() => {
          console.log("我被点击了");
        }}
      >
        点击
      </div>
    );
  },
});

方法事件

import { defineComponent, ref } from "vue";
export default defineComponent({
    setup(props, ctx) {
        const handleClick = ()=>{
            console.log("我被点击了")
        }
        return () => (
            <div onClick={handleClick}>
                点击
            </div>
        );
    },
});

自定义事件

在模版语法中，我们自定义事件，跟定义内置事件是一样的，使用@或者v-on来进行绑定。

data() {
  return {
    count: 0
  }
}

<button @click="count++">Add 1</button>

tsx/jsx中，我们仍然使用on开头

import { defineComponent } from "vue";

const App = defineComponent({
    emits:['handleClick']
    setup() {
        return () => (
            <button >hello world</div>
        );
    },
});

事件修饰符

事件修饰符可以使用vue 提供的withModifiers进行设置,如.self

import { defineComponent, ref, withModifiers } from "vue";
export default defineComponent({
  name: "app",
  setup(props, ctx) {
    return () => (
      <div
        onClick={withModifiers(() => {
          console.log("我被点击");
        }, ["self"])}
      >
        点击
      </div>
    );
  },
});
复制代码

但是对于 .passive、.capture 和 .once 事件修饰符，使用withModifiers并不生效,这里可以采用链式驼峰的形式进行设置,不如.once

import { defineComponent } from "vue";
export default defineComponent({
  name: "app",
  setup(props, ctx) {
    return () => (
      <div
        onClickOnce={() => {
          console.log("我被点击");
        }}
      >
        点击
      </div>
    );
  },
});

双向绑定(v-model)

<myInput v-model:value={val} v-model:myList={list} />

插槽