如何在Vue3中使用jsx/tsx？

谁骂我谁是pig
371 阅读5分钟

我们都知道，通常情况下我们使用Vue大多都是用的SFC(Signle File Component)单文件组件模式，即一个组件就是一个文件，但其实Vue也是支持使用JSX来编写组件的。这里不讨论SFC和JSX的好坏，这个仁者见仁智者见智。本篇文章在带领大家快速了解和使用Vue中的JSX语法，好让大家在Vue中遇到或使用JSX的时候能很快入手。

JSX如何用？

这里以vite项目为例，要想在项目中使用JSX，我们需要安装一个插件 @vitejs/plugin-vue-jsx，这个插件可以让我们在项目中使用JSX/TSX。

npm i @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()],  
});

接下来我们看一下如何使用JSX？

首先第一种方式就是在 .vue文件中使用，需要将script中的lang设置为tsx，在setup函数中返回模板

<script lang="tsx">  
import { defineComponent } from "vue";  
export default defineComponent({  
name: "app",  
setup(props, ctx) {  
return () => <div>Hello World</div>;  
},  
});  
</script>

或者将 .vue改成.tsx，注意：如果后缀为 .tsx，需要将引入到这个组件的路径后缀去掉

import { defineComponent } from "vue";  
export default defineComponent({  
  name: "app",  
  setup(props, ctx) {  
    return () => <div>Hello World</div>;  
  },  
});

//main.ts中引入  
import { createApp } from "vue";  
import "./style.css";  
import App from "./App";  
  
createApp(App).mount("#app");

此时页面上就会展示一个Hello World

第二种方式是函数式组件，因为函数式组件里没有this引用，所有vue把props当作第一个参数传入，第二个参数ctx包含三个属性：attrs、emit和slots。它们分别相当于组件实例的attrs、attrs、attrs、emit和$slots这几个属性。

//App.tsx  
export default (props, ctx) => <div>Hello World</div>;

到这里，我们不难发现，TSX相比于SFC有一个特点，那就是它可以在一个文件中定义多个组件模板，比如：

const Component1 = () => <div>Component1</div>;  
const Component2 = () => <div>Component2</div>;  
  
export default () => (  
  <div>  
    <Component1 />  
    <Component2 />  
  </div>  
);

此时页面中便出现了我们定义的两个组件。

WechatIMG269.jpeg

接下来我们来看一下JSX在vue中的具体用法

插值

在SFC中使用插值的时候我们可以使用{{}}进行包裹，而在JSX中是使用{}进行包裹，例如

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

这里需要注意的是在SFC模板中是不需要加 .value的，但是JSX模板中则需要加 .value

条件渲染（v-if）

在SFC中我们可以使用v-if进行条件渲染，如：

<div>  
  <div v-if="showyes">yes</div>  
  <span v-else>no</span>  
</div>

而在JSX中则没有了v-if，而是采用更接近原生的写法

import { defineComponent, ref } from "vue";  
export default defineComponent({  
  name: "app",  
  setup(props, ctx) {  
    const showyes = ref(true);  
    return () => <div>{showyes.value ? <div>yes</div> : <div>no</div>}</div>;  
  },  
});

除了v-if，大家可能还会想到另一个条件渲染方式v-show，JSX中是支持使用v-show的

import { defineComponent, ref } from "vue";  
export default defineComponent({  
  name: "app",  
  setup(props, ctx) {  
    const showyes = ref(true);  
    return () => (  
      <div>  
        <div v-show={showyes.value}>yes</div>  
        <div v-show={!showyes.value}>no</div>  
      </div>  
    );  
  },  
});

列表循环（v-for）

在SFC中我们经常使用v-for进行列表循环渲染，如

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

而在JSX中我们则需要改成使用map进行列表循环渲染

import { defineComponent, ref } from "vue";  
export default defineComponent({  
  name: "app",  
  setup(props, ctx) {  
    const list = ref(["one", "two", "three"]);  
    return () => (  
      <div>  
        {list.value.map((item, index) => (  
          <div key={index}>{item}</div>  
        ))}  
      </div>  
    );  
  },  
});

注意：JSX中列表循环也是要加key的。

事件绑定

事件绑定其实JSX与SFC就是写法上的区别，以click为例，在SFC中使用@click或者v-on:click进行事件绑定，在JSX中则使用onClick进行事件绑定。

import { defineComponent, ref } from "vue";  
export default defineComponent({  
  name: "app",  
  setup(props, ctx) {  
    return () => (  
      <div  
        onClick={() => {  
          console.log("我被点击");  
        }}  
      >  
        点击  
      </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

v-model在绑定modelValue或者在input标签中使用的时候其实和SFC差不多

import { defineComponent, ref } from "vue";  
export default defineComponent({  
  name: "app",  
  setup(props, ctx) {  
    const num = ref(0);  
    return () => <input type="text" v-model={num.value} />;  
  },  
});

当在组件中使用绑定自定义事件的时候和SFC就有了区别，比如绑定一个msg，在SFC中直接v-model:msg即可，而在JSX中则需要使用一个数组。我们直接看下面两个例子你就会明白，假如我们组件名叫ea_button，这个组件发送了一个update:changeMsg的方法，父组件的msg变量需要接受update:changeMsg函数传来的参数。

SFC：

<ea-button v-model:changeMsg="msg"></ea-button>

JSX：

<ea-button v-model={[msg.value, 'changeMsg']}></ea-button>

插槽

先看下默认插槽，我们定义一个字组件Child接收一个默认插槽。

import { defineComponent, ref } from "vue";  
const Child = (props, { slots }) => {  
  return <div>{slots.default()}</div>;  
};  
  
export default defineComponent({  
  name: "app",  
  setup(props, ctx) {  
    const num = ref(0);  
    return () => <Child>默认插槽</Child>;  
  },  
});

如果想使用具名插槽则需要在父组件中传入一个对象，对象的key值就是插槽的名字。

import { defineComponent, ref } from "vue";  
const Child = (props, { slots }) => {  
  return (  
    <div>  
      <div>{slots.slotOne()}</div>  
      <div>{slots.slotTwo()}</div>  
      <div>{slots.slotThree()}</div>  
    </div>  
  );  
};  
  
export default defineComponent({  
  name: "app",  
  setup(props, ctx) {  
    const num = ref(0);  
    return () => (  
      <Child>  
        {{  
          slotOne: () => <div>插槽1</div>,  
          slotTwo: () => <div>插槽2</div>,  
          slotThree: () => <div>插槽3</div>,  
        }}  
      </Child>  
    );  
  },  
});

如果我们想在父组件的插槽内容中获取到子组件中的变量，此时便涉及到了作用域插槽。在JSX中我们可以在子组件调用默认插槽或者某个具名插槽的时候传入参数，如下面的插槽1为例。

import { defineComponent, ref } from "vue";  
//@ts-ignore  
const Child = (props, { slots }) => {  
  const prama1 = "插槽1";  
  return (  
    <div>  
      <div>{slots.slotOne(prama1)}</div>  
      <div>{slots.slotTwo()}</div>  
      <div>{slots.slotThree()}</div>  
    </div>  
  );  
};  
  
export default defineComponent({  
  name: "app",  
  setup(props, ctx) {  
    return () => (  
      <Child>  
        {{  
          slotOne: (pramas: string) => <div>{pramas}</div>,  
          slotTwo: <div>插槽2</div>,  
          slotThree: <div>插槽3</div>,  
        }}  
      </Child>  
    );  
  },  
});

我们可以看到prama1=插槽1 是子组件中的变量，我们通过slots.slotOne(prama1)将其传到了父组件的插槽内容中。

最后

关于Vue3中JSX的语法就介绍这么多，其实如果你熟悉Vue的SFC语法还是能很快上手JSX语法的，因为它们也就是写法上有一些区别，用法上还是基本一样的。至于选择哪一种写法还是取决于我们自己。

avatar
文章
阅读
粉丝