vue3 での jsx/tsx のエレガントな使用法について話しましょう-Vue.js-php.cn

vue3 での jsx/tsx のエレガントな使用法について話しましょう

青灯夜游

リリース： 2022-10-08 18:07:25

転載

2642 人が閲覧しました

vue で jsx/tsx をエレガントに使用するにはどうすればよいですか?次の記事では、vue3 での jsx/tsx のエレガントな使い方を紹介します。

vue3 での jsx/tsx のエレガントな使用法について話しましょう

react パートナーは全員 jsx/tsx に精通していると思いますが、現在は vue3## を使用しています。 #jsx/tsx 構文を使用することもできます。 [関連する推奨事項: vuejs ビデオチュートリアル ]

プラグインをインストールします (@vitejs/plugin-vue-jsx)

vite公式は、vue3 での jsx/tsx の使用をサポートする公式プラグインを提供しています。直接インストールするだけです。

yarn add @vitejs/plugin-vue-jsx -D

ログイン後にコピー

インストール後、

vite.config.ts

import vueJsx from "@vitejs/plugin-vue-jsx";

export default defineConfig({
  plugins: [
    vueJsx(),
  ]
})

ログイン後にコピー

にコードを挿入します。設定後は、プロジェクト

jsx/tsx##で使用できます。 # La

1. 補間

jsx/tsx の補間は、vue テンプレート構文の補間と同じであり、次のような有効な Javascript 式をサポートします。 ##a b

a || 5...jsx/tsx では二重中括弧 {{}}

が

{}

// vue3模板语法
<span>{{ a + b }}</span>

// jsx/tsx
<span>{ a + b }</span>

ログイン後にコピー

2. クラスとスタイルのバインド

クラスのクラス名をバインドするには、テンプレートを使用する 2 つの方法があります。文字列または配列を使用します。

テンプレート文字列を使用して 2 つのクラス名をスペースで区切ります

// 模板字符串
<div>header</div>
//数组
<div>header</div>

ログイン後にコピー

スタイルバインディングでは二重中括弧を使用する必要があります

const color = 'red'
const element = <sapn>style</sapn>

ログイン後にコピー

3。条件付きレンダリング

v-show

v-if命令はありません if/else
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> setup() { const isShow = false const element = () => { if (isShow) { return <span>我是if</span> } else { return <span>我是else</span> } } return () => ( <div> <span>我是v-show</span> { element() } { isShow ? <p>我是三目1</p> : <p>我是三目2</p> } <div> ) }4 を実現できます。リストのレンダリング<h2 data-id="heading-4"> <strong>同様に、jsx/ Thereは tsx の </strong>v-for</h2> 命令ではありません。リストを表示するには、Js の配列メソッド <p>map<code> を使用するだけです。</code></p> <pre class="brush:php;toolbar:false">setup() { const listData = [ {name: 'Tom', age: 18}, {name: 'Jim', age: 20}, {name: 'Lucy', age: 16} ] return () => ( <div> <div> <span>姓名</span> <span>年龄</span> </div> { prop.listData.map(item => { return <div> <span>{item.name}</span> <span>{item.age}</span> </div> }) } </div> ) }</pre><div class="contentsignin">ログイン後にコピー</div></div> <code>5。イベント処理
バインディングイベントでも単一の中括弧
- が使用されますが、イベントバインディングにはプレフィックス
  @ が付きません。代わりに、on に変更されました。例: クリックイベントは onClick
  イベント修飾子を使用する必要がある場合は、次のものが必要です。
- メソッドを使用するには、
  withModifiers メソッドは 2 つのパラメーターを受け取ります。最初のパラメーターはバインドされたイベント、2 番目のパラメーターは使用する必要があるイベントです。 Modifier
```
setup() {
    const clickBox = val => {
        console.log(val)
    }
    return () => (
        <div> clickBox('box1')}>
            <span>我是box1</span>
            <div> clickBox('box2')}>
                <span>我是box2</span>
                <div> clickBox('box3'), ['stop'])}>我是box3</div>
            </div>
        </div>
    )
}
```
  ログイン後にコピー
jsx/tsx は v-model 構文をサポートします
```
// 正常写法
<input> // vue
<input> // jsx

// 指定绑定值写法
<input> // vue
<input> // jsx

// 修饰符写法
<input> // vue
<input> // jsx
```
ログイン後にコピー
7、スロット Slot

スロットを定義します

jsx/tsx には slot
タグがありません。
を使用する必要があります。スロットを定義します。{}または、renderSlot 関数を使用します。setup 関数は、デフォルトで 2 つのパラメータ 1. props 2. スロット、attrs、emit などを含む ctx コンテキストを受け取ります。
```
import { renderSlot } from "vue"
export default defineComponent({
    // 从ctx中解构出来 slots
    setup(props, { slots }) {
        return () => (
            <div>
                { renderSlot(slots, 'default') }
                { slots.title?.() }
            </div>
        )
    }
})
```
ログイン後にコピー
スロットを使用する

v-slots
```
import Vslot from './slotTem'
export default defineComponent({
    setup() {
        return () => (
            <div>
                <vslot> {
                        return <p>我是title插槽</p>
                    },
                    default: () => {
                        return <p>我是default插槽</p>
                    }
                }} />
            </vslot>
</div>
        )
    }
})
```
ログイン後にコピー
8 を通じてスロットを使用できます。実装するには tsx を使用します。 recursiveComponents-menu
主な機能は、ルーティング情報に基づいてメニューを自動的に生成することです。
効果は次のとおりです。

#コードは次のとおりです。権限などを制御する必要がある場合は、ルーティング情報の
metaに該当するパラメータを追加し、
で##
```
// index.tsx

import { routes } from '@/router/index'
import MenuItem from './menuItem'
import './index.scss'

export default defineComponent({
    setup() {
        const isShowRoutes = computed(() => {
            return routes
        })
        const currentPath = computed(() => {
            return useRoute().path
        })

        return () => (
            <el-scrollbar>
                <el-menu>
                    {
                        isShowRoutes.value.map((route) => {
                            return <menuitem></menuitem>
                        })
                    }
                </el-menu>
            </el-scrollbar>
        )
    }
})
```
ログイン後にコピー
rrree
を自分で制御します。 menuItem (学習ビデオ共有: Web フロントエンド開発、基本プログラミングビデオ
)