1. Vue3コンポーネント通信方式
2. Vue3通信の使い方2.1 小道具
方法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 の情報です" } </スクリプト> 知らせ: 親コンポーネントが混合スタイルで記述され、子コンポーネントが純粋な 親コンポーネントが純粋な 担当者は「3が使われているので2は書かないように」とも言っており、混在した書き方は推奨されていない。以下の例では、純粋な Vue3 のみが使用され、混合記述は使用されていません。 2.2 $エミット// Child.vue ディスパッチ // 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 属性
// 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 提供/注入依存性注入のための
// 親.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 </スクリプト>
以下もご興味があるかもしれません:
|
>>: Linux コマンドラインで他のユーザーと通信する方法
問題の説明:構造:テストには2つのフィールドがあります。これらは col1 と col2 で、どちら...
年、月、週、日グループによる MySQL クエリ1. 学年別検索 SELECT DATE_FORMA...
目次概要(ループモード - 共通)配列と非同期メソッドを宣言して反復するforループで使用するマップ...
序文MySQL では、EXPLAIN コマンドを使用して、テーブルの接続方法や SELECT ステー...
データのバックアップと復元パート3の詳細は次のとおりです基本的な概念:バックアップ、現在のデータまた...
この記事では、参考までに、Vue の具体的なコードを共有して、簡単なショッピングカートを実装します。...
ウェブサイトのアクセス速度を向上させるための徹底的な最適化に関するヒント。ウェブサイトのアクセス速度...
この記事ではMySQL 8.0.15のインストールと設定方法を参考までに記録します。具体的な内容は以...
図に示すように: しかし、IE6で表示すると、right:1px:になります。 IE6 には、幅と高...
次のコマンドを使用してコンテナを作成し、ローカルの /home/dock/Downloads ディレ...
MySQL バッチ挿入の問題プロジェクトを開発しているときに、古いシステムの基本データを事前にインポ...
序文WeChat アプレットでは、App.js の globalData を中間ブリッジとして使用し...
この記事の例では、参考までに、シンプルなショッピングカートモジュールを実装するためのjsの具体的なコ...
序文低速システム コールとは、決して戻らない可能性があり、プロセスを永久にブロックするシステム コー...
仕事の都合上、最近 HTML を PDF に変換する機能について調べることに時間を費やしました。 H...