Vue.js的$emit传递数据和$on接收不了

Question

点击按钮“点击”，$on接收不了数据
1.app.vue

<template>
<div id="app">

<h3>父组件app：{{msg2}}</h3>   
<gfooter></gfooter> 

</div>
</template>
<script>
import gfooter from './components/gfooter.vue'
import Vue from 'vue'

export default {
name: 'app',
data: function () {

return {   
  msg2:'hello'
}   

},
components:{gfooter},
created:function (){

this.$on('change',function(val){
  console.log(val);
  this.msg2 = val;
  
})  

}
}
</script>

2.gfooter.vue

<template>
<div id="footer">

<p>子组件gfooter：{{msg}} <button @click="showTools">点击</button></p>

</div>
</template>

<script>
export default {
name: 'footer',
data () {

return { 
  msg:'父组件，hello',   
}  

},
methods:{

showTools(){
    this.$emit('change',this.msg);
    console.log('this.msg:'+this.msg)
}

}
}
</script>

Answer 1

你这个$emit('created')和$on('change'),名字得一样。
还有父子间的通信用props，eventbus没刷新页面，不会运行$on,props参考https://cn.vuejs.org/v2/api/#...

Answer 2

应该这么写吧

<h3>父组件app：{{msg2}}</h3>   
<gfooter @change="function(){}"></gfooter>