updated: 2020/2/5
vue@2.5.7
vuex@3.0.1
ParentComponent.vue
<app-child-component
v-for="1 in n"
>
親componentからv-forを使って複数の子componentが存在
子componentAで発生させたdoSomething()を兄弟componentB、C、D、、、でも同様に発生させたい。この方法について。
i) Vuexを使ってstateで管理して子componentAでchangeした値をB、C、D、、、で共有できるか試みた。(イベントを伝播させるのではなくイベントの結果で得る値を共有)
doSomethingがvuetifyの<v-img contain>に関係するCSS関連のリサイズ処理で、
document.getElementById()を使用する必要があり、vuexで実装出来なかった。
値だけパスすればよければVuexを使えばよく、何らかの理由でメソッド自体を伝播させたければ下記の方法で解決できる。
ⅱ) 親componentからprops、eventEmiterを設定してその値の変化で共通のdoSomethingを発生させた。
ParentComponent.vue
<app-child-component
v-for="1 in n"
:eventEmitter="eventEmitter"
v-on:callDispatcher="callDispatcher"
>
data() {
return {
eventEmitter: 0
}
},
methods: {
callDispatcher() {
this.eventEmitter++
}
}
ChildComponent.vue
methods: {
callDoSomethingAndChangeProps() {
this.$emit('callDispatcher')
doSomethig()
},
doSomethig() {
// do something
}
}
これで各子componentでcallDoSomethingAndChangePropsを発生させると他の子componentのprops eventEmitterが＋＋されるようになったのでこの値の変化に応じてdoSomething()がinitされるようにすればよい。
ChildComponent.vue
beforeUpdate() {
doSomething()
}
updated() {
doSomething()
}
beforeUpdateもupdatedもpropsの変化があってもdoSomething()をinitしない。
solution) watchを使う
https://jp.vuejs.org/v2/api/index.html#vm-watch
ChildComponent.vue
watch: {
'eventEmitter'() {
this.doSomething
}
}
これでpropsのeventEmitterの値が変化したらdoSomethingがinitされるようになった。
目的である子componentでdoSomethingがinit されたら兄弟component でもdoSomethingがinitされるようになった。
おまけ：
一連の動作に使うdata, methods, watch は子component間で共通なのでmixinにまとめるとよい。
