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が変更され,矢印関数を用いることができる.
例は次のとおりです(実際のケースを直接抜粋).
親コンポーネント:
email.js、2つのサブコンポーネントがインポートされるjsは、2つのサブコンポーネントが1つのイベントメカニズムを共有するようにし、次の2つの点に重点を置きます.
Configコンポーネント、データを渡すコンポーネント
Sendコンポーネント、つまりデータを受け取るコンポーネント
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
})
}
}