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 チュートリアル

推薦する

Ubuntu 18.04 Server に静的 IP を設定する方法

1. 背景Netplan は、Ubuntu システムのネットワーク設定を簡単に管理および構成できるよ...

CSSはクーポンスタイルを実装するために放射状グラデーションを使用します

この記事では、CSS で放射状グラデーションを使用して、次の図に示すクーポン スタイルの効果を実現す...

MySQL の簡単な分析 - MVCC

バージョンチェーンInnoDB エンジン テーブルでは、クラスター化インデックス レコードに 2 つ...

MySQLカバーインデックスの利点

一般的な提案は、WHERE 条件のインデックスを作成することですが、これは実際には一方的です。インデ...

Tomcat で複数の war パッケージを展開する方法と手順

1 背景JDK1.8-u181とTomcat8.5.53がインストールされました。インストール後、環...

Windows 10 インストール vmware14 チュートリアル図

ソフトウェアのダウンロードソフトウェアのダウンロード リンク: https://pan.baidu....

http:// の代わりに // を使用する利点は何ですか (アダプティブ https)

//デフォルトプロトコル/ デフォルト プロトコルの使用は、リソース アクセス プロトコルが現在の...

Vueコンポーネント通信方法事例まとめ

目次1. 親コンポーネントが子コンポーネントに値を渡す(props) 2. サブコンポーネントは親コ...

Viteは仮想ファイルの実装を導入します

目次背景仮想ファイルのインポート例書類タイプスクリプトのサポート要約する背景新しいプロジェクトで v...

ドラッグ可能で編集可能なガントチャートの詳細な説明(HighchartsはVueとReactで使用できます)

序文Excel は強力で、広く使用されています。 Web アプリケーションの登場と改善に伴い、ユーザ...

Vue要素ヘッダーにスラッシュを追加するための実装コード

<テンプレート> <div class="アプリコンテナ"&...

jsを使ってシンプルなディスククロックを実現する

この記事では、参考までに、シンプルなディスククロックを実装するためのjsの具体的なコードを紹介します...

HTML テーブルタグチュートリアル (35): 列間属性 COLSPAN

複雑なテーブル構造では、一部のセルが垂直方向に複数のセルにまたがるため、列間属性 COLSPAN を...

uniappがインターフェースドメイン名を動的に取得する方法を分析する

背景インターフェイス ドメイン名はハードコードされておらず、動的に取得されます。具体的な実装は、静的...

MySQL のスローログ監視の誤報問題の分析と解決

以前は、さまざまな理由により、一部のアラームは真剣に受け止められませんでした。最近、休暇中に、すぐに...