Vue 親子コンポーネントの相互値の転送と呼び出し

Vue 親子コンポーネントの相互値の転送と呼び出し

1. 親が子コンポーネントに値を渡す

親コンポーネント:

<テンプレート>
  <div>
    <p class="father">父コンポーネント</p>
    <child:sid="id"></child>
  </div>
</テンプレート>

<スクリプト>
'./child' から子をインポートします
エクスポートデフォルト{
  コンポーネント:
    子供
  },
  データ() {
    戻る {
      id:'1234' // 親コンポーネントから子コンポーネントに渡される値}
  }
}
</スクリプト>

サブコンポーネント:

<テンプレート>
  <div>
    <p class="child">子コンポーネント</p>
    <p class="child">受け取った親コンポーネントの値は次のとおりです: {{ sid }}</p>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  小道具:{
    シド:{
      タイプ:文字列、
      デフォルト: '0'
    }
  },
  // プロパティ:["sid"],
  データ() {
   戻る { 

   } 
 } 
} 
</スクリプト>

例:

①sidはサブコンポーネントに渡される値です。「=」の前のsidはサブコンポーネントで受け入れられる変数名と一致している必要があることに注意してください。

② 子コンポーネントで props を使用して、入力値を受け入れます。オブジェクト型として記述したり、型とデフォルト値を指定したり、文字列として直接記述したりできます。

③サブコンポーネント内で直接使用することも、関数内でthis.sidを使用してアクセスすることもできます。

2. 子コンポーネントが親コンポーネントに値を渡す

親コンポーネント:

<テンプレート>
  <div>
    <p class="father">父コンポーネント</p>
   <p class="father">子コンポーネントの値を受け取ります: {{childSid}}</p>
    <child @passValue="親パス値"></child>
  </div>
</テンプレート>

<スクリプト>
'./child' から子をインポートします
エクスポートデフォルト{
  コンポーネント:
    子供
  },
  データ() {
    戻る {
      childSid:'' // 子コンポーネントの値を受け取る}
  },
  メソッド: {
    親パス値(データ) {
      this.childSid = データ;
    }
  }
}
</スクリプト>

サブコンポーネント:

<テンプレート>
  <div>
    <p class="child">子コンポーネント</p>
    <button @click="valueClick">値を渡す</button>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  データ() {
    戻る {
    }
  },
  メソッド: {
    値クリック() {
      これを$emit('passVaule',19)します
    }
  }
}
</スクリプト>

例:

① 子コンポーネントに$emitをトリガーするメソッドを指定します。最初のパラメータは、親コンポーネントが子コンポーネントバインディングに導入する関数名(「passVaule」)であり、2番目は渡される値です(19)

②親コンポーネントに関数をバインドし、親コンポーネントにバインドされた関数を呼び出し、その中の値に対して受信操作を実行する

3. 子コンポーネントが親コンポーネントのメソッドを呼び出す

親コンポーネント:

<テンプレート>
  <div>
    <p class="father">父コンポーネント</p>
    <child @funValue="親FunValue"></child>
  </div>
</テンプレート>

<スクリプト>
'./child' から子をインポートします
エクスポートデフォルト{
  コンポーネント:
    子供
  },
  データ() {
    戻る {
    }
  },
  メソッド: {
    親FunValue() {
      console.log('親コンポーネント内の関数が呼び出されます');
    }
  }
}
</スクリプト>

サブコンポーネント:

<テンプレート>
  <div>
    <p class="child">子コンポーネント</p>
    <button @click="funClick">親コンポーネントメソッドを呼び出す</button>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  データ() {
    戻る {
    }
  },
  メソッド: {
    funClick() {
      this.$emit('funVaule')
    }
  }
}
</スクリプト>

例:

①子から親に値を渡すのと似ていますが、値を渡すのではなく、親コンポーネントのバインドされた関数を呼び出します。

4. 親が子コンポーネントのメソッドを呼び出す

親コンポーネント:

<テンプレート>
  <div>
    <p class="father">父コンポーネント</p>
    <button @click="childClick">子コンポーネントメソッドを呼び出す</button>
    <child ref="mychild"></child>
  </div>
</テンプレート>

<スクリプト>
'./child' から子をインポートします
エクスポートデフォルト{
  コンポーネント:
    子供
  },
  データ() {
    戻る {
    }
  },
  メソッド: {
    子クリック() {
      this.$refs.mychild.testNum(1)
    }
  }
}
</スクリプト>

サブコンポーネント:

<テンプレート>
  <div>
    <p class="child">子コンポーネント</p>
</ボタン>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  データ() {
    戻る {
    }
  },
  メソッド: {
    testNum(データ) {
      console.log('子コンポーネントのメソッドが呼び出されました:', data);
    }
  }
}
</スクリプト>

例:

① 親コンポーネントで、インポートした子コンポーネントに ref="mychild" と記述します。Mychid は自身に定義されたインスタンス名です。

②関数内にthis.refs.mychild.testNum()と記述します。「testNum」は子コンポーネントで定義された関数名です。

③子コンポーネントは関数を定義し、親コンポーネントがそれを呼び出すようにします

④このメソッドは値を渡すこともできます。括弧内の値を渡すとサブコンポーネントがそれを受け取ります。

以上がVue親子コンポーネントの相互値転送と呼び出しの詳細です。Vue親子コンポーネントの値転送と呼び出しの詳細については、123WORDPRESS.COMの他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • Vue の親子コンポーネントの値転送と一方向データフローの問題の詳細な説明
  • Vue の親子コンポーネントの値転送の落とし穴
  • Vue コンポーネントのマウントと親子コンポーネントの値の転送の例
  • Vueの親コンポーネントと子コンポーネント間で値を渡すと、マウントされたフック関数が一度しか実行されない問題が解決されます
  • Vue の親子コンポーネントの値転送と親子および子親メソッドをすばやく理解する
  • Vue3 における親コンポーネントと子コンポーネント間の値の転送の詳細な説明

<<:  Ubuntu での MySQL へのリモート ログインのインストールと設定に関するチュートリアル

>>:  VMware WorkStation 14 pro インストール Ubuntu 17.04 チュートリアル

推薦する

CSS における要素の表示モード

CSS では、要素タグは、要素の表示モードの違いに応じて、インラインレベル要素とブロックレベル要素の...

インスピレーションを得るための7つのクールなダイナミックウェブサイトデザイン

デザインの分野では、毎年さまざまなデザインのトレンドや流行があります。たとえば、近年のレスポンシブデ...

WeChatミニプログラムがシームレスなスクロールを実現

この記事の例では、WeChatアプレットのシームレスなスクロールを実現するための具体的なコードを参考...

SQL重複排除方法の概要

SQL を使用してデータを抽出する場合、テーブル内で重複した値に遭遇することがよくあります。たとえ...

Linux NFSメカニズムの動作原理と例の分析

NFS とは何ですか?ネットワークファイルシステムネットワーク上でファイルを保存および整理するための...

MySQL 8.0.11 の新機能の紹介

MySQL 8.0 for Windows v8.0.11 公式無料バージョン 64 ビット1. デ...

Vue は動的なプログレスバー効果を実現します

この記事では、動的なプログレスバー効果を実現するためのVueの具体的なコードを例として紹介します。具...

JavaScript の Set データ構造の詳細な説明

目次1. セットとは何か2. セットコンストラクタ2.1) 配列2.2) 文字列2.3) 議論2.4...

シェルを使用してMySQLデータバックアップスクリプトを作成する

アイデアそれは実はとても簡単ですシェル スクリプトを記述して、mysql の mysqldump を...

JavaScript キャンバスで動的な点と線の効果を実現

この記事では、動的な点と線の効果を実現するためのJavaScriptキャンバスの具体的なコードを参考...

MySQL 条件付きクエリと使用法および優先順位の例の分析

この記事では、例を使用して、MySQL 条件クエリ and or の使用方法と優先順位を説明します。...

テーブルを使用する場合と CSS を使用する場合 (経験の共有)

TW のメインテキスト ページは、以前は小さなモニターと低解像度のユーザーを考慮して幅が 850 ピ...

ウェブサイトのカラースキーム ウェブサイトに適した色の選択

色はウェブサイト訪問者に影響を与えますか?数年前までは、ウェブサイトはまだ贅沢品でしたが、今ではほと...

JSキャンバスは描画ボードと署名ボードの機能を実現します

この記事では、お絵かきボード/サインボード機能を実現するためのJSキャンバスの具体的なコードを参考ま...

MySQL と Golan 間の従来の分散トランザクションのための 7 つのソリューション

目次1. 基本理論1.1 取引1.2 分散トランザクション2. 分散トランザクションソリューション2...