ホームページ > 記事 > ウェブフロントエンド > Vue の親コンポーネントと子コンポーネントの間で通信するにはどうすればよいですか? Vue の親コンポーネントと子コンポーネント間の 4 つの通信方法

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

不言オリジナル: 2018-09-10 17:43:132366ブラウズ

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

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

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

58652436a08d62d32b90566dafe0913c b189eeee14645d7772f2c737ba7338c77d4dd9c7239aac360e401efe89cbb393//这里必须要用 - 代替驼峰db7b8d074c72824ed121864240fe4c81data(){ return { msg: [1,2,3] };}

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

props: [&#39;childMsg&#39;]

メソッド 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 の親コンポーネントと子コンポーネント間の 4 つの通信方法

関連記事