vue3 のさまざまな構文形式を比較したサンプルコード

vue3 のさまざまな構文形式を比較したサンプルコード

デフォルトのテンプレートメソッドはvue2に似ており、コンポーネント内のセットアップ関数を使用します。

// 親コンポーネント <テンプレート>
  <div>
    <div>
      <div>{{都市名}}</div>
      <button @click="changeReactive">リアクティブを変更する</button>
      <button @click="handleFather">親コンポーネントをクリックします</button>
    </div>
    <Child ref="childRef" @handleBtn="handleBtn" @testClick="testClick" city="成都" />
  </div>
</テンプレート>

<スクリプト>
'vue' から { ref、onMounted、toRefs、reactive } をインポートします。
'./Child.vue' から Child をインポートします。

エクスポートデフォルト{
  コンポーネント:
    子供
  },
  設定 () {
    定数ハンドルボタン = (val) => {
      console.log('btn', val)
    }

    const testClick = (val) => {
      コンソールログ('testClick', val)
    }

    定数childRef = ref(null)

    定数ハンドルファーザー = () => {
      childRef.value.observed.a = 666 //親コンポーネントが子コンポーネントの値を変更します console.log('子コンポーネントを取得する方法', childRef.value)
      // サブコンポーネントは expose を定義する必要があります。定義しない場合は、返す必要があります。対応する関数は通常、直接返されません。ページで使用されていない場合は、必要なメソッドまたは値のみを公開します。 }

    // セットアップ関数メソッドを介して記述し、ページで使用されるメソッドと値を返す必要があります // reactve によって定義された値の場合、分解によってページにレンダリングされた値はレスポンシブではないため、toRefs を介して変換してから分解する必要があります // ...toRefs(testReactive)
    
    const testReactive = リアクティブ({
      都市: '北京'、
      年齢: 22
    })

    定数changeReactive = () => {
      testReactive.city = '重慶'
    }

    戻る {
      ハンドルボタン、
      テストクリック、
      ハンドル父、
      ...toRefs(テストリアクティブ)、
      変化反応、
      子参照
    }
  }
}
</スクリプト>


//サブコンポーネント <テンプレート>
  <div>
    {{観察された.a}}
    <button @click="handleBtn">クリック</button>
  </div>
</テンプレート>

<スクリプト>
'vue' から {defineProps、defineEmits、defineEmit、defineExpose、reactive } をインポートします。

エクスポートデフォルト{
  小道具: {
    都市: 文字列
  },

  /* これは主に ctx.attrs がこの属性にアクセスできないようにするために設定されます */
  /* props に設定された一部のプロパティは attrs には表示されません*/

  出力: ['testClick'], // これを設定する目的は、attrs に対応するカスタム メソッドがないことを確認することです。
  // peops がサブコンポーネントに設定されている場合、対応する値は attrs ではアクセスできません // arrts は vue3 で機能が強化されており、カスタム メソッド、クラス、スタイルがマウントされています
  //vue2 では、カスタム メソッドは $listeners にマウントされます。vue3 では、$listeners は削除されています。setup (props, ctx) {
    const { 公開、放出 } = ctx
    定数ハンドルボタン = () => {
      コンソールログ('btn', ctx)
      出力('testClick', 666)
    }

    const 観察 = 反応的({
      1: 1
    })

    関数 clickChild (値) {
      観測値.a = 値
    }

    さらす({
      clickChild, //カスタムメソッドを公開、親コンポーネントの呼び出しを監視//子コンポーネントの値を公開})

    戻る {
      観察された、
      ハンドルボタン
    }
  }
}
</スクリプト>

スクリプトタグ<script setup>にセットアップを記述します。

// 親コンポーネント <テンプレート>
  <div>
    <button @click="handleFather">父親をクリック</button>
    <Child ref="childRef" @handleBtn="handleBtn" @testClick="testClick" city="成都" />
  </div>
</テンプレート>

<スクリプトの設定>
'vue' から { ref } をインポートします
'./Child.vue' から Child をインポートします。
// 戻りエクスポートページで使用されていないメソッドと値のこの書き方では、Vue 上の対応する定義を直接分解する必要があります。
定数childRef = ref(null)

定数ハンドルボタン = (val) => {
  console.log('btn', val)
}

const testClick = (val) => {
  コンソールログ('testClick', val)
}

定数ハンドルファーザー = () => {
  console.log('子コンポーネントを取得するメソッド', childRef.value)
  childRef.value.testFatherClick() //親コンポーネントは子コンポーネントのメソッドを呼び出します //子コンポーネントはdefineExposeを通じて対応するメソッドを公開します}

</スクリプト>


// サブコンポーネント <テンプレート>
  <div>
    <button @click="handleBtn">クリック</button>
  </div>
</テンプレート>

<スクリプトの設定>
'vue' から {defineProps、defineEmits、defineExpose、reactive } をインポートします。

const props = defineProps({
  都市: 文字列
})

const エミット = defineEmits(['handleBtn', 'testClick'])

定数ハンドルボタン = () => {
  // console.log('btn', props, 出力)
  出力('testClick', 12)
}

const testFatherClick = () => {
  console.log('テスト親コンポーネントが子コンポーネントをクリック')
}

const 観察 = 反応的({
  1: 1
})

defineExpose({ //メソッドを親グループに公開する testFatherClick,
  観察された
})

</スクリプト>

<スタイルスコープ>
</スタイル>

jsx によるレンダリングは react に非常に近く、私が最もお勧めする方法でもあります。jsx は ts もサポートしていますが、.vue ファイルは tsx ほどサポートされていません。

// 親コンポーネント import { ref, reactive } from 'vue'
'./Child.jsx' から Child をインポートします。

const 父 = {
  設定() {
    // jsx で定義された ref は、ページで使用するときに .value を介してアクセスする必要があります。const city = ref('北京')

    定数changeCity = () => {
      city.value = '杭州'
    }

    定数childRef = ref(null)

    const handelFather = (追加) => {
      // また、コンポーネントで expose メソッドを公開することで // city.value = 'Hangzhou'
      console.log('childRef', childRef.値)
    }

    const testChildClick = (val) => {
      console.log('テストサブコンポーネントのクリック', val)
    }

    戻り値 () => {
      戻る (
        <div>
          <div>{city.value}</div>
          <button onClick={changeCity}>都市を変更</button>
          <button onClick={handelFather}>親をクリック</button>
          <子 testChildClick={testChildClick} ref={childRef} />
        </div>
      )
    }
  }
}

エクスポートデフォルト 父


//サブコンポーネント import { ref, reactive } from 'vue'

定数子 = {
  小道具: {
    testChildClick: 関数
  },

  セットアップ(props, { 発行, 公開 }) {
    const { testChildClick } = プロパティ
    const testFatherClick = () => {
      console.log('テスト親コンポーネントが子コンポーネントをクリック')
    }

    定数handelBtn = () => {
      // emitting('testChildClick') // これは jsx では動作しません // console.log('props', props)
      testChildClick('親コンポーネントに値を返す')
      // このメソッドは、関数を介して親コンポーネントに値を渡して子コンポーネントに関数を渡す唯一の方法です。}

    さらす({
      テスト父クリック
    })

    戻り値 () => {
      戻る (
        <div>
          <button onClick={handelBtn}>子コンポーネントは値を親コンポーネントに渡します</button>
        </div>
      )
    }
  }
}

デフォルトの子をエクスポート

要約する

これで、vue3 のさまざまな構文形式の比較に関するこの記事は終了です。より関連性の高い vue3 構文形式の比較コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

<<:  Linux でジャンクファイルをエレガントに削除する方法

>>:  MySQLはライブラリ内の主キーなしでテーブルインスタンスコードを素早く取得します

推薦する

Linux が Sudo 権限昇格の脆弱性を公開、どのユーザーでも root コマンドを実行可能

Linux で最も一般的に使用される重要なユーティリティの 1 つである Sudo は、ほぼすべての...

複数の Docker コンテナが同じポート番号を持たない場合の解決策

背景Dockerでは、同じイメージを使用して4つのコンテナを作成します。ネットワークはブリッジモード...

JS ES の新機能、変数分離割り当て

目次1. 配列の分離割り当て1.1 配列分離割り当てとは何ですか? 1.2 配列分離割り当てに失敗し...

Tomcat プロセスの CPU 使用率が高い場合のトラブルシューティング記録を記録する

この記事では主にTomcatプロセスを記録し、TCP接続が多すぎることによるCPU使用率の過剰のトラ...

Vue3 (III) ウェブサイトホームページレイアウト開発

目次1. はじめに2. 実際の事例1. App.vueを変更する2. レイアウトを調整する3. ジャ...

NodeJs の高メモリ使用量のトラブルシューティング実戦記録

序文これは、オンライン コンテナーの拡張によって発生した調査です。最終的には、実際の OOM が原因...

jQueryはシンプルなポップアップウィンドウ効果を実装します

この記事では、簡単なポップアップウィンドウ効果を実現するためのjQueryの具体的なコードを参考まで...

Zabbix カスタム監視 nginx ステータス実装プロセス

目次Zabbix カスタム監視 nginx ステータス1. ステータスインターフェースを開く2. 監...

Vueはミックスインを使用してコンポーネントを最適化します

目次ミックスインの実装フック関数のマージプロジェクト実践伸ばす要約するVue は mixins AP...

CSS セレクタのグループ化の簡単な分析

セレクタのグループ化h2 要素と段落の両方を灰色にしたいとします。これを行う最も簡単な方法は、次のス...

Idea の起動速度を改善し、Tomcat ログの文字化けを解決する方法

目次序文アイデアの起動速度Tomcat ログが文字化けしている序文Idea を再インストールしたので...

サーバーから返される14の一般的なHTTPステータスコードの詳細な説明

HTTP ステータス コードステータス コードは 3 桁の数字と理由フレーズ (最も一般的なもの: ...

MySQL の replace と replace into の詳細な例 into_Mysql

MySQL の replace と replace into はどちらも頻繁に使用される関数です。...

Rancher のデプロイメントと K8S クラスターのインポートに関する問題

Rancher のデプロイメントには、次の 3 つのアーキテクチャがあります。高可用性 Kubern...

Ubuntu システムに Theano と Keras をインストールする方法

注: システムは Ubuntu 14.04LTS、32 ビット オペレーティング システムです。Py...