ケース：（TOMをクリックすると、JERRYは2ずつ増加し、逆にJERRYをクリックすると、TOMは1ずつ増加します）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./js/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<div>{{pmsg}}</div>
<test-tom></test-tom>
<test-jerry></test-jerry>
</div>
<script>
//提供事件中心
var hub = new Vue();
Vue.component('test-tom', {
data() {
return {
num: 0
}
},
template: `
<div>
<div>TOM:{{num}}</div>
<div>
<button @click='handle'>点击</button>
</div>
</div>
`,
methods: {
handle: () => {
//事件的触发 hub.$emit('触发事件名称',参数)
hub.$emit('jerry-event', 2);
},
},
mounted() {
hub.$on('tom-event', (val) => {
this.num += val;
})
},
});
Vue.component('test-jerry', {
data() {
return {
num: 0
}
},
template: `
<div>
<div>JERRY:{{num}}</div>
<div>
<button @click='handle'>点击</button>
</div>
</div>
`,
methods: {
handle: () => {
//事件的触发 hub.$emit('触发事件名称',参数)
hub.$emit('tom-event', 1);
},
},
//用mounted来监听事件 ，因为在这个时候， 模板已经就绪了， 我们可以对模板进行操作了。（以后用的多的就是mounted这个构造函数）
mounted() {
//监听事件 用箭头函数=>, 因为要用到this ，this指向jerry-event实例
hub.$on('jerry-event', (val) => {
this.num += val;
})
},
});
var vm = new Vue({
el: '#app',
data: {
pmsg: '父组件内容'
}
})
</script>
</body>
</html>
結果：
