Vue3에서 jsx/tsx를 사용하는 방법

JSX 사용 방법

여기서 vite 프로젝트를 예로 들어보겠습니다. 프로젝트에서 JSX를 사용하려면 플러그인 @vitejs/plugin-vue-jsx를 설치해야 합니다. -in을 사용하면 프로젝트에서 JSX를 사용할 수 있습니다. JSX/TSX@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()],
});

接下来我们看一下如何使用 JXS?

首先第一种方式就是在.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>
);

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

接下来我们来看一下 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, &#39;changeMsg&#39;]}></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";
//@ts-ignore
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 中我们可以在子组件调用默认插槽或者某个具名插槽的时候传入参数,如下面的插槽一为例

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)

npm i @vitejs/plugin-vue-jsx -D🎜

🎜설치가 완료된 후 vite.config.ts🎜rrreee 🎜다음으로 JXS 사용법을 살펴볼까요?🎜🎜우선 첫 번째 방법은 .vue 파일에서 사용하는 방법입니다 . 스크립트의 lang을 tsx로 설정해야 합니다. 설정 함수에서 🎜rrreee🎜 템플릿을 반환하거나 .vue를 .tsx로 변경하세요. >. 참고: 접미사가 ​​.tsx인 경우 이 구성 요소의 경로 접미사를 제거하세요🎜rrreeerrreee🎜이때 Hello World 페이지에 표시됩니다🎜🎜두 번째 방법은 기능적 구성 요소입니다. 기능적 구성 요소에는 이 참조가 없기 때문에 Vue는 props를 사용합니다. 첫 번째 매개 변수로 전달된 두 번째 매개 변수 ctx에는 attrs, Emit 및 Slots라는 세 가지 속성이 포함됩니다. 이들은 각각 구성 요소 인스턴스의 attrs, attrs, attrs, Emit 및 $slots 속성과 동일합니다. 🎜rrreee🎜이 시점에서 TSX는 SFC에 비해 기능이 있다는 것을 어렵지 않게 찾을 수 있습니다. 즉, 하나의 파일에 여러 구성 요소 템플릿을 정의할 수 있습니다. 예를 들어 🎜rrreee🎜이때 우리가 정의한 두 가지 구성 요소는 다음과 같습니다. 🎜🎜 🎜🎜 다음으로 vue🎜🎜Interpolation🎜🎜에서 JSX의 구체적인 사용법을 살펴보겠습니다. SFC에서 보간을 사용할 때 래핑에는 {{}}를 사용할 수 있고, JSX에서는 {} 여기서는 SFC 템플릿에 .value를 추가할 필요가 없지만 를 추가해야 한다는 점에 유의해야 합니다. JSX 템플릿의 .value >🎜🎜조건부 렌더링(v-if)🎜🎜SFC에서는 🎜rrreee🎜와 같은 조건부 렌더링에 v-if를 사용할 수 있지만 JSX에서는 v-if는 없지만 네이티브에 가까운 작성 방식을 사용합니다🎜rrreee🎜v-if 외에 또 다른 조건부 렌더링도 생각해 볼 수 있습니다 JSX의 v-show 메소드 v-show🎜rrreee🎜list 루프(v-for) 사용을 지원합니다🎜🎜SFC에서는 v-for를 자주 사용합니다. 🎜rrreee와 같은 목록 루프 렌더링 🎜JSX에서는 목록 루프 렌더링을 위해 맵을 사용하도록 변경해야 합니다🎜rrreee🎜JSX의 목록 루프에도 키를 추가해야 합니다🎜🎜이벤트 바인딩🎜🎜이벤트 바인딩 실제로 JSX와 SFC의 차이점은 작성 방법에 있습니다. click을 예로 들면 @click 또는 v-on:click을 사용하세요. SFC의 이벤트 바인딩에는 onClick을 사용하여 이벤트 바인딩🎜rrreee🎜바운드 함수는 화살표 기능을 사용해야 한다는 점에 유의하세요🎜🎜Event modifier🎜🎜Event modifier는 withModifiers는 vue에서 제공됩니다. 예를 들어 .self🎜rrreee🎜그러나 .passive, .capture 및 .once 이벤트 수정자의 경우 withModifiers를 사용하면 효과가 없습니다. . 여기에서는 체인 낙타 케이스 형식으로 설정할 수 있습니다. modelValue를 바인딩할 때 .once🎜rrreee🎜v-model🎜🎜v-model만큼 좋지는 않습니다. 또는 input 태그에 사용하는 것은 거의 동일합니다🎜rrreee🎜컴포넌트에서 사용자 정의 이벤트를 바인딩하는 경우에는 SFC와 다릅니다. 직접 v-model:msg이면 충분하지만 JSX에서는 배열을 사용해야 합니다. 다음 두 가지 예를 직접 살펴보면 구성 요소 이름이 <code>ea_button인 경우 이 구성 요소가 update:changeMsg 메서드를 보내고 상위 구성 요소의 msg 변수는 update:changeMsg 함수🎜🎜SFC:🎜rrreee🎜JSX:🎜rrreee🎜Slot🎜🎜먼저 기본 슬롯을 살펴보겠습니다. 하위 정의 구성 요소 하위는 기본 슬롯을 받습니다🎜rrreee🎜이름이 지정된 슬롯을 사용하려면 상위 구성 요소의 개체를 전달해야 합니다. 개체의 키 값은 슬롯의 이름입니다🎜rrreee🎜 상위 구성 요소의 슬롯 콘텐츠에서 이를 사용하고 싶습니다. 하위 구성 요소에서 변수를 얻으려면 범위 슬롯이 필요합니다. JSX에서는 하위 구성 요소가 기본 슬롯이나 이름이 지정된 슬롯을 호출할 때 매개변수를 전달할 수 있습니다(예: 아래 슬롯 1과 같이).🎜rrreee🎜 prama1=slot 1이 변수임을 알 수 있습니다. 하위 구성 요소에서 slots.slotOne(prama1)🎜을 통해 상위 구성 요소의 슬롯 콘텐츠에 전달합니다.

위 내용은 Vue3에서 jsx/tsx를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!