Vueコンポーネントの7つの通信方法についての深い理解

// サブコンポーネントコード <テンプレート>
  <div class="child">
    <h4>これは子コンポーネントです</h4>
    <input type="text" v-model="message" @keyup="send" />
    <p>親コンポーネントからメッセージを受信しました: {{ messageFromParent }}</p>
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  名前: 「子供」
  props: ['messageFromParent'], // props data() を通じて親コンポーネントからメッセージを受信します {
    戻る {
      メッセージ： ''、
    }
  },
  メソッド: {
    送信（） {
      this.$emit('on-receive', this.message) // $emit を通じて on-receive イベントをトリガーし、親コンポーネントで受信コールバックを呼び出し、this.message をパラメータとして使用します},
  },
}
</スクリプト>

// 親コンポーネントコード <テンプレート>
  <div class="parent">
    <h3>これは親コンポーネントです</h3>
    <input type="text" v-model="メッセージ" />
    <p>子コンポーネントからメッセージを受信しました: {{ messageFromChild }}</p>
    <子:messageFromParent="メッセージ" @on-receive="受信" />
  </div>
</テンプレート>
<スクリプト>
'./child' から子をインポートします
エクスポートデフォルト{
  名前: '親'、
  データ（） {
    戻る {
      message: '', // 子コンポーネントに渡されるメッセージ messageFromChild: '',
    }
  },
  コンポーネント:
    子供、
  },
  メソッド: {
    受信(msg) { // 子コンポーネントの情報を受け取り、messageFromChildに割り当てます
      this.messageFromChild = メッセージ
    },
  },
}
</スクリプト>

// サブコンポーネントコード <テンプレート>
  <div class="child">
    <h4>これは子コンポーネントです</h4>
    <p>親コンポーネントからメッセージを受信しました:
      <slot name="child"></slot> <!--親コンポーネントからスロットを通じて渡された {{message}} を表示します-->
    </p>
  </div>
</テンプレート>

<テンプレート>
  <div class="parent">
    <h3>これは親コンポーネントです</h3>
    <input type="text" v-model="メッセージ" />
    <子供>
      <テンプレート v-slot:child>
        {{ message }} <!--スロットに表示されるコンテンツ-->
      </テンプレート>
    </子>
  </div>
</テンプレート>
<スクリプト>
'./child' から子をインポートします
エクスポートデフォルト{
  名前: '親'、
  データ（） {
    戻る {
      メッセージ： ''、
    }
  },
  コンポーネント:
    子供、
  },
}
</スクリプト>

// サブコンポーネント <テンプレート>
  <div class="child">
    <h4>これは子コンポーネントです</h4>
    <input type="text" v-model="メッセージ" />
    <p>親コンポーネントからメッセージを受信しました: {{ $parent.message }}</p> <!--親コンポーネントインスタンスのメッセージを表示します-->
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  名前: 'Child1'、
  データ（） {
    戻る {
      message: '', // 親コンポーネントは this.$children を通じて子コンポーネントインスタンスのメッセージを取得できます
    }
  },
}
</スクリプト>

// 親コンポーネント <テンプレート>
  <div class="parent">
    <h3>これは親コンポーネントです</h3>
    <input type="text" v-model="メッセージ" />
    <p>子コンポーネントからメッセージを受信しました: {{ child1.message }}</p> <!--子コンポーネント インスタンスのメッセージを表示します-->
    <子供 />
  </div>
</テンプレート>
<スクリプト>
'./child' から子をインポートします
エクスポートデフォルト{
  名前: '親'、
  データ（） {
    戻る {
      メッセージ： ''、
      子1: {},
    }
  },
  コンポーネント:
    子供、
  },
  マウント() {
    this.child1 = this.$children.find((child) => {
      return child.$options.name === 'Child1' // options.name を通じて対応する名前の子インスタンスを取得します})
  },
}
</スクリプト>

:messageFromA="メッセージ"
v-bind="$attrs"
$attrs.messageFromA

@keyup="受信"
<CompC v-on="$listeners" />
v-on="$リスナー"

// レベル 3 コンポーネント C
<テンプレート>
  <div class="compc">
    <h5>これは C コンポーネントです</h5>
    <input name="compC" type="text" v-model="message" v-on="$listeners" /> <!--コンポーネント A のキーアップ リスナー コールバックを入力にバインドします -->
    <p>コンポーネント A からメッセージを受信しました: {{ $attrs.messageFromA }}</p>
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  名前: 'Compc',
  データ（） {
    戻る {
      メッセージ： ''、
    }
  },
}
</スクリプト>

// レベル 2 コンポーネント B
<テンプレート>
  <div class="compb">
    <h4>これはBコンポーネントです</h4>
    <input name="compB" type="text" v-model="message" v-on="$listeners" /> <!--コンポーネント A のキーアップ リスナー コールバックを入力にバインドします -->
    <p>コンポーネント A からメッセージを受信しました: {{ $attrs.messageFromA }}</p>
    <CompC v-bind="$attrs" v-on="$listeners" /> <!--コンポーネント A の keyup のリスナー コールバックをコンポーネント C に渡し、コンポーネント A から渡された attrs をコンポーネント C に渡します -->
  </div>
</テンプレート>
<スクリプト>
'./compC' から CompC をインポートします。
エクスポートデフォルト{
  名前: 'CompB'、
  コンポーネント:
    コンプC、
  },
  データ（） {
    戻る {
      メッセージ： ''、
    }
  },
}
</スクリプト>

// コンポーネント <template>
  <div class="compa">
    <h3>これはコンポーネントです</h3>
    <input type="text" v-model="メッセージ" />
    <p>{{ comp }} からメッセージを受信しました: {{ messageFromComp }}}</p>
    <CompB :messageFromA="message" @keyup="receive" /> <!-- 子孫コンポーネントの keyup イベントをリッスンし、子孫コンポーネントにメッセージを渡します -->
  </div>
</テンプレート>
<スクリプト>
'./compB' から CompB をインポートします。
エクスポートデフォルト{
  名前: 'CompA'、
  データ（） {
    戻る {
      メッセージ： ''、
      メッセージ送信元: '',
      構成: ''、
    }
  },
  コンポーネント:
    コンプB、
  },
  メソッド: {
    受信(e) { // 子孫コンポーネントのキーアップイベントのコールバックをリッスンし、キーアップが配置されている入力ボックスの値をmessageFromCompに割り当てます。
      this.comp = e.target.name
      this.messageFromComp = e.target.value
    },
  },
}
</スクリプト>

// レベル 1 コンポーネント A
<テンプレート>
  <div class="compa">
    <h3>これはコンポーネントです</h3>
    <input type="text" v-model="message.content" />
    <コンプB />
  </div>
</テンプレート>
<スクリプト>
'./compB' から CompB をインポートします。
エクスポートデフォルト{
  名前: 'CompA'、
  提供する（） {
    戻る {
      messageFromA: this.message, // provide を通じて子孫コンポーネントにメッセージを渡す}
  },
  データ（） {
    戻る {
      メッセージ： {
        コンテンツ： ''、
      },
    }
  },
  コンポーネント:
    コンプB、
  },
}
</スクリプト>

// レベル 2 コンポーネント B
<テンプレート>
  <div class="compb">
    <h4>これはBコンポーネントです</h4>
    <p>コンポーネント A からメッセージを受信しました: {{ messageFromA && messageFromA.content }}</p>
    <コンプC />
  </div>
</テンプレート>
<スクリプト>
'./compC' から CompC をインポートします。
エクスポートデフォルト{
  名前: 'CompB'、
  inject: ['messageFromA'], // Aのprovideから渡されたメッセージをinject経由で受け入れる
  コンポーネント:
    コンプC、
  },
}
</スクリプト>

// レベル 3 コンポーネント C
<テンプレート>
  <div class="compc">
    <h5>これは C コンポーネントです</h5>
    <p>コンポーネント A からメッセージを受信しました: {{ messageFromA && messageFromA.content }}</p>
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  名前: 'Compc',
  inject: ['messageFromA'], // Aのprovideから渡されたメッセージをinject経由で受け入れる
}
</スクリプト>

// メイン.js
Vue.prototype.$Bus = 新しいVue()

// bus.js を import import Vue from 'vue' でインポートします
エクスポートconstBus = new Vue()

// eventBus 原則エクスポート デフォルトクラス Bus {
  コンストラクタ() {
    this.callbacks = {}
  }
  $on(イベント, fn) {
    this.callbacks[イベント] = this.callbacks[イベント] || []
    this.callbacks[イベント].push(fn)
  }
  $emit(イベント、引数) {
    this.callbacks[イベント].forEach((fn) => {
      fn(引数)
    })
  }
}

// main.js に以下をインポートします // Vue.prototype.$bus = new Bus()

// メイン.js
Vue.prototype.$bus = 新しいVue()

// レベル 1 コンポーネント A
<テンプレート>  
  <div class="コンテナA">   
    <h2>CompA です</h2>  
    <input type="text" v-model="message" @keyup="sendMessage" />   
    <p v-show="messageFromBus && 送信者 !== $options.name">      
      {{ sender }} からメッセージを受信しました: {{ messageFromBus }}   
    </p>   
    <コンプB /> 
  </div>
</テンプレート>
<スクリプト>
'./compB' から CompB をインポートします。
エクスポートデフォルト{  
  名前: 'CompA'、 
  コンポーネント:   
    コンプB、  
  },  
  データ（） {  
    戻る {    
      メッセージ： ''、    
      messageFromBus: ''、      
      送信者: ''、   
    } 
  },  
  マウント() {   
    this.$bus.$on('sendMessage', (obj) => { // eventBus を通じて sendMessage イベントをリッスンします const { sender, message } = obj    
      this.sender = 送信者     
      this.messageFromBus = メッセージ  
    }) 
  }, 
  メソッド: {  
    メッセージを送信する（）{     
      this.$bus.$emit('sendMessage', { // eventBus sender を通じて sendMessage イベントをトリガーします: this.$options.name,     
        メッセージ: this.message、   
      })   
    }, 
  },
}
</スクリプト>

// レベル 2 コンポーネント B
<テンプレート> 
  <div class="コンテナB">   
    <h3>これは CompB です</h3>  
    <input type="text" v-model="message" @keyup="sendMessage" />  
    <p v-show="messageFromBus && 送信者 !== $options.name">     
      {{ sender }} からメッセージを受信しました: {{ messageFromBus }}  
    </p>  
    <コンプC />  
    <コンプD /> 
  </div>
</テンプレート>
<スクリプト>
'./compC' から CompC をインポートします。
'./compD' から CompD をインポートします。
エクスポートデフォルト{ 
  名前: 'CompB'、 
  コンポーネント:  
    コンプC、  
    コンプD、  
  }, 
  データ（） {  
    戻る {    
      メッセージ： ''、   
      messageFromBus: ''、    
      送信者: ''、   
    } 
  }, 
  マウント() {    
    this.$bus.$on('sendMessage', (obj) => { // eventBus を通じて sendMessage イベントをリッスンします const { sender, message } = obj     
      this.sender = 送信者     
      this.messageFromBus = メッセージ  
    }) 
  }, 
  メソッド: {  
    メッセージを送信する（）{   
      this.$bus.$emit('sendMessage', { // eventBus sender を通じて sendMessage イベントをトリガーします: this.$options.name,    
        メッセージ: this.message、    
     })   
   },  
 },
}
</スクリプト>

// レベル 3 コンポーネント C
<テンプレート> 
  <div class="コンテナC">  
    <p>これはCompCです</p>   
    <input type="text" v-model="message" @keyup="sendMessage" />   
    <p v-show="messageFromBus && 送信者 !== $options.name">      
      {{ sender }} からメッセージを受信しました: {{ messageFromBus }}  
    </p> 
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{  
  名前: 'CompC',
  データ（） {   
    戻る {   
      メッセージ： ''、   
      messageFromBus: ''、   
      送信者: ''、   
    } 
  }, 
  マウント() {  
    this.$bus.$on('sendMessage', (obj) => { // eventBus を通じて sendMessage イベントをリッスンします const { sender, message } = obj    
      this.sender = 送信者    
      this.messageFromBus = メッセージ   
    })  
  },
  メソッド: {   
    メッセージを送信する（）{    
      this.$bus.$emit('sendMessage', { // eventBus sender を通じて sendMessage イベントをトリガーします: this.$options.name,     
        メッセージ: this.message、     
      })   
    }, 
  },
}
</スクリプト>

// レベル 3 コンポーネント D
<テンプレート> 
  <div class="containerD">   
    <p>これは CompD です</p>   
    <input type="text" v-model="message" @keyup="sendMessage" />   
    <p v-show="messageFromBus && 送信者 !== $options.name">     
      {{ sender }} からメッセージを受信しました: {{ messageFromBus }} 
    </p> 
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{ 
  名前: 'CompD', 
  データ（） {  
    戻る {   
      メッセージ： ''、   
      messageFromBus: ''、   
      送信者: ''、   
    } 
  }, 
  マウント() {   
    this.$bus.$on('sendMessage', (obj) => { // eventBus を通じて sendMessage イベントをリッスンします const { sender, message } = obj    
      this.sender = 送信者   
      this.messageFromBus = メッセージ   
    }) 
  }, 
  メソッド: {  
    メッセージを送信する（）{   
      this.$bus.$emit('sendMessage', { // eventBus sender を通じて sendMessage イベントをトリガーします: this.$options.name,     
        メッセージ: this.message、   
      })  
    }, 
  },
}
</スクリプト>

//ストア.js
'vue' から Vue をインポートします
'vuex' から Vuex をインポートします
Vue.use(Vuex)
デフォルトの新しいVuex.Storeをエクスポートします({
  州： {
    メッセージ： {
      送信者: ''、
      コンテンツ： ''、
    },
  },
  突然変異:
    送信メッセージ(状態、オブジェクト) {
      状態.メッセージ = {
        送信者: obj.sender、
        コンテンツ: obj.content,
      }
    },
  },
})

// コンポーネントA
<テンプレート>
  <div class="コンテナA">
    <h2>CompA です</h2>
    <input type="text" v-model="メッセージ" />
    <p v-show="messageFromStore && 送信者 !== $options.name">
      {{ sender }} からメッセージを受信しました: {{ messageFromStore }}
    </p>
    <コンプB />
  </div>
</テンプレート>
<スクリプト>
'./compB' から CompB をインポートします。
エクスポートデフォルト{
  名前: 'CompA'、
  コンポーネント:
    コンプB、
  },
  データ（） {
    戻る {
      メッセージ： ''、
    }
  },
  計算: {
    メッセージFromStore() {
      this.$store.state.message.content を返します
    },
    送信者() {
      this.$store.state.message.sender を返します
    },
  },
  時計：
    メッセージ(新しい値) {
      this.$store.commit('sendMessage', {
        送信者: this.$options.name,
        コンテンツ: newValue、
      })
    },
  },
}
</スクリプト>