Vue の親コンポーネントと子コンポーネントの間で通信するにはどうすればよいですか? Vue の親コンポーネントと子コンポーネント間の 4 つの通信方法

この記事がもたらすのは、Vue の親コンポーネントと子コンポーネントの間で通信する方法についてです。 Vue の親コンポーネントと子コンポーネントの間の 4 つの通信方法は、参考になると思います。

現在、親子通信には 4 つの方法があります:

1. 親コンポーネントが子コンポーネントにデータを渡す
親コンポーネントのデータが子コンポーネントにどのように渡されるか?これは、props 属性を通じて実現できます
親コンポーネント:

<parent> <child :child-msg="msg"></child>//这里必须要用 - 代替驼峰</parent>data(){ return { msg: [1,2,3] };}

子コンポーネントは props を通じてデータを受信します:
メソッド 1:

props: ['childMsg']

メソッド 2:

props: { childMsg: Array //这样可以指定传入的类型，如果类型不对，会警告}
props: { childMsg: { type: Array, default: [0,0,0] //这样可以指定默认的值 }}

このようにして、親コンポーネントは子にデータを送信します

2. 子コンポーネントは親コンポーネントと通信します
それでは、子コンポーネントがデータを変更したい場合はどうすればよいでしょうか? Vue では一方向のデータ転送のみが許可されているため、これは許可されていません。現時点では、カスタム イベントをトリガーすることで親コンポーネントにデータの変更を通知でき、それによって子コンポーネントのデータを変更するという目的を達成できます。 v-on バインディングを使用する カスタム イベント

各 Vue インスタンスはイベント インターフェイスを実装します。つまり、次のとおりです。

$on(eventName) を使用してイベントをリッスンする
$emit(eventName) を使用してイベントをトリガーする

親コンポーネントは子コンポーネントを使用できます。 v-on を直接使用して、サブコンポーネントによってトリガーされるイベントをリッスンします。

子コンポーネント:

<template> <div 
@click="up"></div></template>methods: { up() { 
this.$emit(&#39;resultChange&#39;,&#39;hehe&#39;); //主动触发resultChange方法，&#39;hehe&#39;为向父组件传递的数据
 }}

親コンポーネント:

<div> <child @on-result-change="mychangHandle" 
:msg="msg"></child> 
//监听子组件触发的upup事件,然后调用change方法</div>methods: { mychangHandle(msg) {
 this.msg = msg; }}

トリガーされたイベントはキャメルケース形式のカスタム イベント名を使用し、親コンポーネントで on-evnet-name を使用してリッスンできます。

3. コンポーネント間の通信
2 つのコンポーネントが親子コンポーネントではない場合、どのように通信するのでしょうか?このときの通信はeventHubを通じて行うことができます
いわゆるeventHubは中継局に相当するイベントセンターを作成するもので、イベントの配信やイベントの受信に利用できます
として空のVueインスタンスを使用します。中央のイベント バス:

let Hub = new Vue(); //创建事件中心,注意Hub要放在全局

コンポーネント 1 トリガー:

<div @click="eve"></div>methods: { eve() { Hub.$emit(&#39;change&#39;,&#39;hehe&#39;); //Hub触发事件 }}

コンポーネント 2 受信:

<div></div>created() { Hub.$on(&#39;change&#39;, () => { //Hub接收事件 this.msg = &#39;hehe&#39;; });}

4. $refs

props とイベントにもかかわらず、JavaScript で子コンポーネントに直接アクセスする必要がある場合があります。これを行うには、 ref を使用して子コンポーネントのインデックス ID を指定します。

<div id="parent">
  <user-profile ref="profile"></user-profile>
</div>
var parent = new Vue({ el: &#39;#parent&#39; })
// 访问子组件
var child = parent.$refs.profile

ref が v-for とともに使用される場合、ref は対応するサブコンポーネントを含む配列またはオブジェクトになります。

関連する推奨事項:

vue の親コンポーネントと子コンポーネント間の通信を実装する方法

vue の子コンポーネントと親コンポーネント間の通信の詳細な説明

以上がVue の親コンポーネントと子コンポーネントの間で通信するにはどうすればよいですか? Vue の親コンポーネントと子コンポーネント間の 4 つの通信方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。