<body>
<div id="app">
<!-- 3.使用子组件 -->
<App></App>
</div>
<script>
//1.创建中央事件总线 bus
const bus = new Vue();
Vue.component('B', {
data() {
return {
count: 0
}
},
template: `
<div>
{{count}}
</div>
`,
created() {
// 2.$on 绑定事件
bus.$on("add", (n) => {
this.count += n;
})
}
})
Vue.component('A', {
data() {
return {
}
},
template: `
<div>
<button @click='handleClick'>加入购物车</button>
</div>
`,
methods: {
handleClick() {
// 3.$emit 触发事件
bus.$emit("add", 1);
}
},
})
const App = {
data() {
return {
}
},
template: `
<div>
<A></A>
<B></B>
</div>
`
}
new Vue({
el: '#app',
data: {
},
components: {
//2.挂载子组件
App
}
})
</script>
</body>