1.中央イベントバス
- 要は、vueインスタンスを作成し、空のvueインスタンスをブリッジとして使用することで、vueコンポーネント間の通信を可能にします。親子でないコンポーネント間の通信を可能にするソリューションです。
- 1.busのvueインスタンスを作成します。
- 2.作成されたコンポーネントBのライフサイクルで、$on on busを使い、addを
- 3.Aコンポーネントのhandleメソッドで、バスの$emidメソッドを使い、トリガーします。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 3.子コンポーネントを使う -->
<App></App>
</div>
//js
<script src="./vue.js"></script>
<script>
// セントラル・イベント・バス bus
const bus = new Vue();
//グローバル・コンポーネントB
Vue.component('B', {
data() {
return {
count: 0
}
},
template: `
<div>{{count}}</div>
`,
created(){
// $on イベントをバインドする
bus.$on('add',(n)=>{
this.count+=n;
})
}
})
//グローバル・コンポーネントA
Vue.component('A', {
data() {
return {
}
},
template: `
<div>
<button @click='handleClick'>カートに追加する</button>
</div>
`,
methods:{
handleClick(){
// バインディング関数をトリガーする // $emit イベントをトリガーする
bus.$emit('add',1);
}
}
})
//
const App = {
data() {
return {
}
},
template: `
<div>
<A></A>
<B></B>
</div>
`,
}
//vueをインスタンス化する
new Vue({
el: '#app',
data: {
},
components: {
// 2.子コンポーネントをマウントする
App
}
})
</script>
</body>
</html>
2.中央イベントバスの足場への応用
const C = function (Obj) {
const B = new Obj({
'foo': { 'b'(Foo, ...fOo) { this.bar(Foo, ...fOo); }, 'a'(oBj, bAr) { this.obj(oBj, bAr); }, 'c'(BAr, FOo) { this.A(BAr, FOo); }
}
});
Obj.prototype.Bar = B;
};
export default C;
- その後、main.jsにvue-bus.jsを導入します。
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Change from "./components/vue03/vue-bus"
Vue.use(Change);
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
<template>
<div @click="testSend(msg)">子1コンポーネント</div>
</template>
<script>
export default {
data() {
return {
msg: "gogogog"
}
},
methods: {
testSend(val) {
console.log(val);
this.$bus.emit("getMsg", val)
}
}
};
</script>
<style lang="scss" scoped>
</style>
<template>
<div>
並列コンポーネント2
{{msg1}}
</div>
</template>
<script>
export default {
data() {
return {
msg1: '',
};
},
created() {
this.$bus.on('getMsg', this.getBus);
},
methods: {
getBus(val) {
console.log("これは、中央のイベントバスからの値である。", val)
this.msg1 = val;
}
},
beforeDestroy() {
//beforeDestroyを削除する必要がある。
this.$bus.off('getMsg', this.getBus);
}
};
</script>
<style lang="scss" scoped>
</style>
- 次に、child1コンポーネントとchild2コンポーネントをインポートし、それらをクリックして対応するイベントをトリガーし、並列コンポーネント間で渡される値を確認します。
