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

vue で 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

命令のみがjsx/tsxに保持されますが、
• 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 = () =&gt; {            if (isShow) {                return &lt;span&gt;我是if&lt;/span&gt;            } else {                return &lt;span&gt;我是else&lt;/span&gt;            }        }        return () =&gt; (            &lt;div&gt;                &lt;span&gt;我是v-show&lt;/span&gt;                {                    element()                }                {                    isShow ? &lt;p&gt;我是三目1&lt;/p&gt; : &lt;p&gt;我是三目2&lt;/p&gt;                }            &lt;div&gt;        )    }4 を実現できます。リストのレンダリング&lt;h2 data-id=&quot;heading-4&quot;&gt; &lt;strong&gt;同様に、jsx/ Thereは tsx の &lt;/strong&gt;v-for&lt;/h2&gt; 命令ではありません。リストを表示するには、Js の配列メソッド &lt;p&gt;map&lt;code&gt; を使用するだけです。&lt;/code&gt;&lt;/p&gt; &lt;pre class=&quot;brush:php;toolbar:false&quot;&gt;setup() {    const listData = [        {name: 'Tom', age: 18},        {name: 'Jim', age: 20},        {name: 'Lucy', age: 16}    ]    return () =&gt; (        &lt;div&gt;            &lt;div&gt;                &lt;span&gt;姓名&lt;/span&gt;                &lt;span&gt;年龄&lt;/span&gt;            &lt;/div&gt;            {                prop.listData.map(item =&gt; {                    return &lt;div&gt;                        &lt;span&gt;{item.name}&lt;/span&gt;                        &lt;span&gt;{item.age}&lt;/span&gt;                    &lt;/div&gt;                })            }        &lt;/div&gt;    ) }</pre><div class="contentsignin">ログイン後にコピー</div></div> <code>5。イベント処理
  バインディング イベントでも単一の中括弧
  {}
  • が使用されますが、イベント バインディングにはプレフィックス

    @ が付きません。代わりに、on に変更されました。例: クリック イベントは onClick

    イベント修飾子を使用する必要がある場合は、次のものが必要です。
  withModifiers
  • メソッドを使用するには、

    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>
        )
    }

  6、v-model

  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 フロントエンド開発、基本プログラミング ビデオ

  )