Vue3における7種類のコンポーネント通信の詳細

Vue3における7種類のコンポーネント通信の詳細

1. Vue3コンポーネント通信方式

  • props
  • $emit
  • expose / ref
  • $attrs
  • v-model
  • provide / inject
  • Vuex

2. Vue3通信の使い方

2.1 小道具

propsを使用して子コンポーネントにデータを渡すには、次の 2 つの方法があります。

方法1: 混合書き込み

// Parent.vue は <child :msg1="msg1" :msg2="msg2"></child> を送信します。
<スクリプト>
「./child.vue」から子をインポートします。
「vue」から{ref、reactive}をインポートします。
エクスポートデフォルト{
    データ(){
        戻る {
            メッセージ1: 「これはサブコンポーネント1の情報です」
        }
    },
    設定(){
        // レスポンシブデータを作成する // 記述方法 1 は基本型 ref に適用でき、他の用途もあります。次の章では、const msg2 = ref("これはサブコンポーネント 2 の情報です") を紹介します。
        
        // メソッド 2 は、配列やオブジェクトなどの複雑な型に適しています。const msg2 = reactive(["これはサブコンポーネント 2 の情報です"])
        
        戻る {
            メッセージ2
        }
    }
}
</スクリプト>

// Child.vue は <script> を受け取ります
エクスポートデフォルト{
  props: ["msg1", "msg2"], // この行が書かれていない場合、次の行は受け取られません setup(props) {
    console.log(props) // { msg1: "これは子コンポーネントに渡された情報 1 です", msg2: "これは子コンポーネントに渡された情報 2 です" }
  },
}
</スクリプト>

方法2: 純粋なVue3の記述

// Parent.vue は <child :msg2="msg2"></child> を送信します。
<スクリプトの設定>
    「./child.vue」から子をインポートします。
    「vue」から{ref、reactive}をインポートします。
    const msg2 = ref("これは子コンポーネント2に渡される情報です")
    // または複合型 const msg2 = reactive(["これはサブコンポーネント 2 の情報です"])
</スクリプト>

// Child.vue は <script setup> を受け取ります
    // 直接インポートする必要はありません // import { defineProps } from "vue"
    const props = defineProps({
        //書き込み方法1 msg2: 文字列
        // 書き込み方法 2 msg2:{
            タイプ:文字列、
            デフォルト:""
        }
    })
    console.log(props) // { msg2: "これはサブコンポーネント 2 の情報です" }
</スクリプト>

知らせ:

親コンポーネントが混合スタイルで記述され、子コンポーネントが純粋なVue3スタイルで記述されている場合、子コンポーネントは親コンポーネントのdataの属性を受け取ることができず、親コンポーネントのセットアップ関数で渡された属性のみを受け取ることができます。

親コンポーネントが純粋なVue3で記述され、子コンポーネントが混合スタイルで記述されている場合、 dataおよびsetup関数内のプロパティはpropsを通じて受け取ることができます。ただし、子コンポーネントが setup で受け取る場合、親コンポーネントのsetup関数内のプロパティしか受け取ることができず、 data 内のプロパティを受け取ることはできません。

担当者は「3が使われているので2は書かないように」とも言っており、混在した書き方は推奨されていない。以下の例では、純粋な Vue3 のみが使用され、混合記述は使用されていません。

2.2 $エミット

// Child.vue ディスパッチ
<テンプレート>
//書き方1
<button @click="emit('myClick')">ボタン</button>
//書き方2
<button @click="handleClick">ボタン</buttom>
</テンプレート>
<スクリプトの設定>

// 方法 1 は Vue 3.2 バージョンに適用可能であり、導入する必要はありません
// "vue" から {defineEmits } をインポートします
// 対応する書き方1
const エミット = defineEmits(["myClick","myClick2"])
// 対応する書き方2
const ハンドルクリック = ()=>{
emitting("myClick", "これは親コンポーネントに送信される情報です")
}

// メソッド 2 は Vue 3.2 には適用できません。useContext() は非推奨です。
「vue」から {useContext} をインポートします。
const { 出力 } = useContext()
const ハンドルクリック = ()=>{
emitting("myClick", "これは親コンポーネントに送信される情報です")
}
</スクリプト>

// Parent.vue は <template> に応答します
    <child @myClick="onMyClick"></child>
</テンプレート>
<スクリプトの設定>
    「./child.vue」から子をインポートします。
    定数 onMyClick = (メッセージ) => {
        console.log(msg) // これは親コンポーネントが受信した情報です}
</スクリプト>

2.3 公開 / 参照

親コンポーネントは子コンポーネントのプロパティを取得するか、子コンポーネントメソッドを呼び出します。

// 子.vue
<スクリプトの設定>
    // 方法 1 は、useContext() が非推奨となった Vue 3.2 には適用できません。import { useContext } from "vue"
    定数ctx = useContext()
    // 外部に公開されるプロパティとメソッドはctx.expose({
        childName: "これは子コンポーネントのプロパティです",
        いくつかのメソッド(){
            console.log("これは子コンポーネントのメソッドです")
        }
    })
    
    // 方法 2 は Vue 3.2 バージョンに適用可能で、インポートする必要はありません // import { defineExpose } from "vue"
    定義公開({
        childName: "これは子コンポーネントのプロパティです",
        いくつかのメソッド(){
            console.log("これは子コンポーネントのメソッドです")
        }
    })
</スクリプト>

// Parent.vue 注記 ref="comp"
<テンプレート>
    <child ref="comp"></child>
    <button @click="handlerClick">ボタン</button>
</テンプレート>
<スクリプトの設定>
    「./child.vue」から子をインポートします。
    「vue」から{ref}をインポートします
    定数comp = ref(null)
    const ハンドラクリック = () => {
        console.log(comp.value.childName) // 子コンポーネントによって公開されているプロパティを取得します。 comp.value.someMethod() // 子コンポーネントによって公開されているメソッドを呼び出します。 }
</スクリプト>

2.4 属性

attrs : classstyleを除く親スコープ内の非props属性のコレクションが含まれます。

// Parent.vue は <child :msg1="msg1" :msg2="msg2" title="3333"></child> を送信します。
<スクリプトの設定>
    「./child.vue」から子をインポートします。
    「vue」から{ref、reactive}をインポートします。
    定数msg1 = ref("1111")
    定数msg2 = ref("2222")
</スクリプト>

// Child.vue は <script setup> を受け取ります
    「vue」から{defineProps、useContext、useAttrs}をインポートします。
    // バージョン 3.2 では defineProps を導入する必要はありません。const props = defineProps({ を使用するだけです。
        メッセージ1: 文字列
    })
    // メソッド 1 は、useContext() が非推奨となった Vue 3.2 には適用できません。const ctx = useContext()
    // msg1 が props を使用して受信されない場合は、次のようになります { msg1: "1111", msg2: "2222", title: "3333" }
    console.log(ctx.attrs) // { msg2:"2222", タイトル: "3333" }
    
    // 方法 2 は Vue 3.2 バージョンに適用可能 const attrs = useAttrs()
    console.log(attrs) // { msg2:"2222", タイトル: "3333" }
</スクリプト>

2.5Vモデル

複数のデータの双方向バインディングをサポートできます

// 親.vue
<child v-model:key="キー" v-model:value="値"></child>
<スクリプトの設定>
    「./child.vue」から子をインポートします。
    「vue」から{ref、reactive}をインポートします。
    定数キー = ref("1111")
    定数値 = ref("2222")
</スクリプト>

// 子.vue
<テンプレート>
    <button @click="handlerClick">ボタン</button>
</テンプレート>
<スクリプトの設定>
    
    // 方法 1 は、useContext() が非推奨となった Vue 3.2 には適用できません。import { useContext } from "vue"
    const { 出力 } = useContext()
    
    // 方法 2 は Vue 3.2 バージョンに適用可能であり、導入する必要はありません // import { defineEmits } from "vue"
    const 出力 = defineEmits(["キー","値"])
    
    // 使用法 const handlerClick = () => {
        出力("update:key", "新しいキー")
        出力("update:value", "新しい値")
    }
</スクリプト>

2.6 提供/注入

依存性注入のためのprovide / inject

  • provide : 子孫コンポーネントに提供したいデータを指定することができます。
  • inject : このコンポーネントに追加するデータを任意の子孫コンポーネントで受け取ります。コンポーネントがどれだけ深くネストされていても、直接使用できます。
// 親.vue
<スクリプトの設定>
    「vue」から{provide}をインポートします
    provide("name", "Muhua")
</スクリプト>

// 子.vue
<スクリプトの設定>
    「vue」からインポートします。
    const name = inject("name")
    console.log(name) // ムー・フア</script>

2.7 ヴュークス

// ストア/index.js
「vuex」から{createStore}をインポートします
エクスポートデフォルトcreateStore({
    状態:{ カウント: 1 },
    ゲッター:{
        getCount: 状態 => 状態.count
    },
    突然変異:
        追加(状態){
            状態.count++
        }
    }
})

// メイン.js
「vue」から{createApp}をインポートします
「./App.vue」からアプリをインポートします。
「./store」からストアをインポートします。
createApp(App).use(store).mount("#app")

// ページ.vue
// 方法 1: <template> を直接使用する
    <div>{{ $store.state.count }}</div>
    <button @click="$store.commit('add')">ボタン</button>
</テンプレート>

// <スクリプト設定> を取得する方法 2
    「vuex」から useStore, computed をインポートします。
    定数ストア = useStore()
    コンソールログ(ストアの状態カウント) // 1

    const count = computed(()=>store.state.count) // レスポンシブ、vuex データの変更に応じて変化します console.log(count) // 1 
</スクリプト>

Vue3の 7 種類のコンポーネント通信の詳細についての記事はこれで終わりです。Vue3 の 7 種類のコンポーネント通信の詳細については、 Vue3の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue.jsはコンポーネント間の通信を毎日学習する必要がある
  • Vuejs 第10章: Vuejs 親子コンポーネント通信
  • Vue でのコンポーネント通信の 8 つの方法 (収集する価値があります!)
  • Vue コンポーネント間の通信: 子コンポーネントが親コンポーネントに値を渡す方法
  • 祖父母コンポーネントと通信する Vue 孫コンポーネントの実装
  • Vue のクロスコンポーネント通信のいくつかの方法についての詳細な説明
  • Vue.js コンポーネントとコンポーネント通信の詳細
  • Vueコンポーネント通信の3つの方法の詳細な説明
  • Vueコンポーネントがコンポーネント通信を実現する仕組みについて詳しく説明します。

<<:  MySQL のバックアップとリカバリの設計アイデア

>>:  Linux コマンドラインで他のユーザーと通信する方法

推薦する

MYSQL 文字関数を使用してデータをフィルタリングすることに関する質問

問題の説明:構造:テストには2つのフィールドがあります。これらは col1 と col2 で、どちら...

時間別にグループ化された MySQL クエリ ステートメント

年、月、週、日グループによる MySQL クエリ1. 学年別検索 SELECT DATE_FORMA...

JS ループで async と await を正しく使用する方法

目次概要(ループモード - 共通)配列と非同期メソッドを宣言して反復するforループで使用するマップ...

EXPLAIN を使って MySQL の SQL 実行プランを分析する方法

序文MySQL では、EXPLAIN コマンドを使用して、テーブルの接続方法や SELECT ステー...

史上最も簡単な MySQL データのバックアップと復元のチュートリアル (パート 2) (パート 37)

データのバックアップと復元パート3の詳細は次のとおりです基本的な概念:バックアップ、現在のデータまた...

Vueはシンプルなショッピングカートの例を実装します

この記事では、参考までに、Vue の具体的なコードを共有して、簡単なショッピングカートを実装します。...

ウェブサイトのアクセス速度を向上させるための徹底的な最適化に関するヒント

ウェブサイトのアクセス速度を向上させるための徹底的な最適化に関するヒント。ウェブサイトのアクセス速度...

MySQL 8.0.15 のインストールと設定のグラフィックチュートリアル

この記事ではMySQL 8.0.15のインストールと設定方法を参考までに記録します。具体的な内容は以...

IE6 で幅と高さがおかしいバグ

図に示すように: しかし、IE6で表示すると、right:1px:になります。 IE6 には、幅と高...

dockerでマウントされたディレクトリが読み書きできない問題を解決する

次のコマンドを使用してコンテナを作成し、ローカルの /home/dock/Downloads ディレ...

MySQL バッチ挿入とユニークインデックスの問題に対する解決策

MySQL バッチ挿入の問題プロジェクトを開発しているときに、古いシステムの基本データを事前にインポ...

WeChatアプレットの世界的な状況の詳細な説明

序文WeChat アプレットでは、App.js の globalData を中間ブリッジとして使用し...

jsはシンプルなショッピングカートモジュールを実装します

この記事の例では、参考までに、シンプルなショッピングカートモジュールを実装するためのjsの具体的なコ...

Linuxで中断されたシステムを呼び出す方法

序文低速システム コールとは、決して戻らない可能性があり、プロセスを永久にブロックするシステム コー...

HTML から PDF への変換事例の概要 (複数の画像を推奨)

仕事の都合上、最近 HTML を PDF に変換する機能について調べることに時間を費やしました。 H...