vueコンポーネントから得られるいくつかの値伝達方式

vueには複数のコンポーネントがあり、親コンポーネント、子コンポーネント、兄弟コンポーネントなど、これらのコンポーネント間の伝達方法も異なります.
1.親コンポーネントを子コンポーネントに渡す
この値伝達方式は比較的簡単で、サブコンポーネントはpropsで親コンポーネントから伝達されたデータを受信するだけで、親コンポーネントコードを使用することができます.

サブアセンブリコード:

props: {
    parentData: { type: String, required: true }
  },

子コンポーネントから親コンポーネントからデータが受信されました
2.子コンポーネントを親コンポーネントに渡す
サブコンポーネントが親コンポーネントに値を渡すには、カスタムメソッドを使用し、親コンポーネントがこのメソッドを監視してサブコンポーネントから値を取得する必要があります.サブアセンブリはthis.$を通ります.EmitはsetDataメソッドにデータを配置し、親コンポーネントはsetDataを監視する方法で値を取り出します.サブアセンブリコード:

        

export default {
  name: 'Childrenfrt',
  data() {
    return{
      children1Data: ''
    }
  },
  methods: {
    sentChildData() {
      this.$emit('sentData', this.children1Data)
    }
  }
}

親コンポーネントコード:

 


export default {
  name: 'Index',
  data() {
    return{
      childData: ''
    }
  },
  methods: {
    sentData(val) {
      this.childData = val
    }
  }
}

3.兄弟コンポーネント間の評価
兄弟コンポーネントとは、平級間のコンポーネントを指し、彼らの中で値を伝達する方法が多い.1つ目は、親コンポーネントに値を渡す後、親コンポーネントから子コンポーネントに値を渡すことによって別のサブコンポーネントに値を伝える面倒な方法である.Busイベントバスを使用して、中継局を作成して値を送信できます.busフォルダを作成し、フォルダにindexを新規作成します.jsファイル

import Vue from 'vue'

const Bus = new Vue()

export default Bus

メールでjsでの参照

import Bus from './bus/Bus'

Vue.prototype.$bus = Bus   //  vue     $bus  

メソッドでの使用方法:this.$bus.$Emit setDataToBratherに値を入れる

 this.$bus.$emit('setDataToBrather', this.children1Data)   //               ，            

値を取る方法:$onで値を取り出すことによって、第1のパラメータはまだ前に伝達する方法名で、第2のパラメータは1つの関数で、関数の中のパラメータは伝達する値で、最後にbeforeDestroyフック関数の中でこのスレッドを閉じることを忘れないでください

created() {
    this.$bus.$on('setDataToBrather', (val) => {
      this.ChildrenSecData = val
    })
  },
beforeDestroy() {
    this.$bus.$off('setDataToBrather')
  }

4.vuex伝値
vuexはステータス管理モードで、値を倉庫に保管することに相当します.使いたい場合は、倉庫から直接取り出せばいいです.以下のようにします.

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    childData: ''
  },
  mutations: {
    setChildData (state, val) {
      state.childData = val
    }
  },
})

vuexのstateウェアハウスでchildDataを作成し、空の値を与えます.値を割り当てる必要がある場合は、commitでmutationに値を渡し、mutationからstateのchildDataに値を割り当てる必要があります.

 sentDataUseVuex() {
      this.$store.commit('setChildData', this.children1Data)   //       mutation     ，             
    }

値を取る必要がある場合:

this.$store.state.childData

これによりvuexに格納された値を取り出すことができます.
5.this.$attrsとthis.$listeners
6.this.$parentとthis.$children
7.provideとinject(使用は推奨されず、自分で下位ライブラリを作成する場合のみ使用可能)