How to use jsx/tsx in Vue3-Vue.js-php.cn

How to use JSX

Here we take the vite project as an example. If we want to use JSX in the project, we need to install a plug-in@vitejs/plugin-vue-jsx. This plug-in can Let's use JSX/TSX in the project

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

After the installation is complete, invite.config.tsJust make a configuration

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

Copy after login

Next let’s take a look at how to use JXS?

First of all, the first way is to use it in the.vuefile, which requires Set the lang in the script totsx, return the template

Copy after login

in the setup function or change.vueto.tsx, please note : If the suffix is.tsx, you need to remove the suffix

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

Copy after login

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

Copy after login

from the path introduced to this component. At this time, aHello World

# will be displayed on the page. ##The second method is functional components. Because there is no this reference in functional components, Vue passes props as the first parameter. The second parameter ctx contains three attributes: attrs, emit and slots. They are respectively equivalent to the attrs, attrs, attrs, emit and $slots attributes of the component instance.

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

Copy after login

At this point it is not difficult to find that TSX has a feature compared to SFC, that is, it can define multiple component templates in one file, such as

const Component1 = () => Component1
; const Component2 = () => Component2
; export default () => (    
 );

Copy after login

At this time, the page The two components we defined appeared

How to use jsx/tsx in Vue3

Next let’s take a look at the specific usage of JSX in vue

Interpolation

In When using interpolation in SFC, we can use

{{}}for wrapping, while in JSX we use{}for wrapping, such as

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

Copy after login

. You need to pay attention here. What's more, you don't need to add

.valuein the SFC template, but you need to add.value

in the JSX template. Conditional rendering (v-if)

In SFC we can use

v-iffor conditional rendering, such as

 yes
 no

Copy after login

, but in JSX there is no

v-if, but Use a writing method that is closer to native

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

Copy after login

In addition to

v-if, you may also think of another conditional rendering methodv-show, which is supported in JSXv-show

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

Copy after login

List loop (v-for)

In SFC we often use

v-forfor list loop rendering, such as

 {{ item }}

Copy after login

In JSX, we need to change to using map for list loop rendering

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

Copy after login

Note that list loops in JSX also need to add key

Event binding

Event binding is actually the difference between JSX and SFC. Taking

clickas an example, use@clickorv-on:click in SFCFor event binding, in JSX, useonClickfor event binding

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

Copy after login

It should be noted here that the bound function must use the arrow function

Event modification Symbol

Event modifiers can be set using the

withModifiersprovided by vue, such as.self

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

Copy after login

But for .passive, .capture and. Once event modifier, using

withModifiersdoes not take effect. It can be set in the form of chained camel case. It is not as good as.once

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

Copy after login

v-model

v-model is actually similar to SFC when binding

modelValueor using it in theinputtag

import { defineComponent, ref } from "vue"; export default defineComponent({ name: "app", setup(props, ctx) { const num = ref(0); return () => ; }, });

Copy after login

When using binding customization in a component There are differences between events and SFC. For example, to bind a

msg, in SFC you can directly usev-model:msg, but in JSX you need to use an array. If we look directly at the following two examples, you will understand that if our component is namedea_button, this component sends aupdate:changeMsgmethod, the parent component’smsgVariables need to accept the parameters passed by theupdate:changeMsgfunction

SFC:

Copy after login

JSX:

Copy after login

Slot

Let’s look at the default slot first. We define a sub-component Child to receive a default slot

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

Copy after login

If you want to use a named slot, you need to pass in an object in the parent component, and the key value of the object is the slot. The name

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

Copy after login

If we want to get the variables in the child component from the slot content of the parent component, this involves the scope slot. In JSX, we can pass in parameters when the sub-component calls the default slot or a named slot, such as the following slot one as an example

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

Copy after login

We can see

prama1=slot 1is a variable in the child component, we pass it to the slot content of the parent component throughslots.slotOne(prama1)

The above is the detailed content of How to use jsx/tsx in Vue3. For more information, please follow other related articles on the PHP Chinese website!

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

How to use jsx/tsx in Vue3

How to use JSX