vueピット充填ピット(二):コンポーネント間の伝達問題

コンポーネント開発では、サブコンポーネントの親コンポーネント間および兄弟コンポーネント間の値伝達の問題が発生することは避けられません.
1、親コンポーネントを子コンポーネントに渡す:
親コンポーネントがplaceholder値をサブコンポーネントに渡す必要がある場合は、親コンポーネントラベルでplaceholder=「XXX」を定義し、サブコンポーネントはdataでprops:['placeholder']を定義して受け入れ、受信したplaceholderはthis.labelで直接取り出すことができます.
注意:propsプロパティは使用のみを取り出すことができ、値を変更することはできません.
親コンポーネント:

サブアセンブリ:

export default {
    data() {
      return {
        modelValue:'',
      }
    },
    props:['placeholder'],
}

2、サブアセンブリを親に渡す:
サブコンポーネントがinput入力ボックスの値を親コンポーネントに渡す必要がある場合、サブコンポーネントではトリガイベントv-on:blur=「change」(ここではフォーカスを失ったトリガを使用)を定義し、changeイベントで$emitを使用して値を伝え、親コンポーネントでは次のように定義します.
サブアセンブリ:

changeメソッド:

change(){
    const self = this;
    self.$emit('transferParamSelect',{value:self.modelValue});
}

親コンポーネント:

getParamSelect(msg){   
   console.log(this.msg.value);   //          
}

3、兄弟コンポーネントの間で値を伝えます.
まず、vue導入ファイルHub.jsを定義する必要があります.

import Vue from 'vue'
export default new Vue()

2つの値を伝達する必要があるコンポーネントは同時にHub.jsを導入する

import Hub from '../js/hub'

コンポーネントA

Hub.$emit('change',{value:self.modelValue}) //$emit      , value  B  

コンポーネントB

 Hub.$on('change',function(msg){
   console.log(msg.value);
 })  

123123