Vue兄弟コンポーネント間の値伝達が便利なもの

1527 ワード

vue.js兄弟コンポーネント間伝値
1、兄弟間でデータを伝達するには、イベント車を利用して、イベントを通じてデータを伝達することができる2、Vueのインスタンスを作成し、各兄弟に同じイベントメカニズムを共有させる.3.データを転送する側は、イベントによってBusをトリガーする.e m i t(メソッド名、渡されたデータ).4.受信データ側は、m o u n t e d()によりB u sをトリガ.Emit(メソッド名、渡されたデータ).4.受信側は、mounted(){}によってBusをトリガーする.Emit(メソッド名、渡されたデータ).4.受信データ側はmounted()によってBusをトリガーする.on(メソッド名,function(データを受信するパラメータ){このコンポーネントのデータで伝達されたデータを受信する})では,関数中のthisが変更され,矢印関数を用いることができる.
例は次のとおりです(実際のケースを直接抜粋).
親コンポーネント:


import Config from './config'
import Send from './send'

email.js、2つのサブコンポーネントがインポートされるjsは、2つのサブコンポーネントが1つのイベントメカニズムを共有するようにし、次の2つの点に重点を置きます.
import Vue from 'vue'
export const Bus = new Vue

Configコンポーネント、データを渡すコンポーネント
import { get, update,Bus} from '@/api/email'

created() {
    this.init()
},
methods: {
    init() {
      get().then(res => {
        this.form = res
        Bus.$emit("transmitEmailConfig",this.form)
      })
    }
}

Sendコンポーネント、つまりデータを受け取るコンポーネント
mounted() {
    this.transmitEmailConfig()
},
methods: {  
  transmitEmailConfig(){
      Bus.$on("transmitEmailConfig",(data) =>{
        this.eamilConfig = data
      })
    }
}