Vue.js親子コンポーネントは値を伝達する.兄弟コンポーネントの値

概要
vueにおけるコンポーネント間の伝値伝値の場合は主に以下の3種類がある
親コンポーネントから子コンポーネントへの値伝達子コンポーネントから親コンポーネントへの値伝達兄弟コンポーネント間の相互値伝達または2つの関係のないコンポーネント間の値伝達
紹介を始める前に、3つのvueファイルを作成します.ファイル名はParentです.vue , Child1.vue , Child2.vue
1、親コンポーネントから子コンポーネントへの値の伝達
この場合,サブコンポーネントにpropsを用いることで実現できる3つの伝達スキームの中で最も簡単である.
親コンポーネントvueのコード

import Child1 from './Child1'

export default {
  name: 'Parent',
  components: {
    'child-1': Child1
  },
  data () {
    return {
      btnName: '     button'
    }
  }
}

サブアセンブリChild 1.vue

export default {
  name: 'Child1',
  props: ['btnName']
}

キーは、サブコンポーネントでpropsキーを使用して親コンポーネントから送信された値を受信する必要があることです.
2、サブアセンブリから親アセンブリに値を渡す
サブコンポーネントが親コンポーネントに値を渡すときにvueのemitを使用し、onで傍受するイベントを使用する必要があります.次に、ボタンのクリック回数を統計できる機能を実現します.親コンポーネントにcountフィールドが統計に使用されます.buttonのクリック回数はまずParentでなければなりません.vueのdataではcount変数を定義し、デフォルト値は0で、コードは以下の通りです.

data () {
    return {
      btnName: '     button',
      count: 0
    }
  }

次にcountをtemplateに追加すると表示が容易になり、parent.vueのtemplateのコードは以下の通りです.

次に、親コンポーネントにcount値を変更できるイベントを追加し、リスニングイベントを追加する必要があります.

import Child1 from './Child1'

export default {
  name: 'Parent',
  components: {
    'child-1': Child1
  },
  data () {
    return {
      btnName: '     button',
      count: 0
    }
  },
  methods: {
    changeCount () {
      ++this.count
    }
  }
}

サブアセンブリChild 1.vue

export default {
  name: 'Child1',
  props: ['btnName'],
  methods: {
    clickHandle () {
      this.$emit('update:count')
    }
  }
}

buttonをクリックするとcountの値を変更できます
3、兄弟コンポーネント間の伝達値
(1)変更が必要な値を親コンポーネントに配置し、サブコンポーネントはpropsによって親コンポーネントの値を取得する(2)eventbusによって兄弟コンポーネント間の伝値を実現する.その原理はemitによって実現される.違いは、現在グローバルに空のvueオブジェクトを確立し、その後、イベントを空のオブジェクトにバインドし、最後にこの空のオブジェクトによって$onリスニングのイベント兄弟Aをトリガすることである.

import bus from "../bus.js";
export default {
  created() {
    bus.$on("toA", value => {
      console.log("  A");
      console.log(value);
    });
  },
  methods: {
    toB() {
      bus.$emit("toB", "   A   ");
    }
  }
};

兄弟B

import bus from '../bus.js'
export default {
  created() {
    bus.$on('toB',(value)=>{
      console.log('  B');
      console.log(value);
    })
  },
  methods: {
    toA(){
      bus.$emit('toA','   B    ！！！#@！#！@#@！@#！！@#')
    }
  },
};

使用法は複雑な名前で、複数のコンポーネントでイベントを傍受してトリガーする必要があり、メンテナンスに不利な場合はVuex 1で直接使用すればよい.だからbusモードは、基本的には捨てられています