Vue事件派发后接收不到，求指点？

Question

如下代码，我从子组件派发一个事件，但是在父组件中并没有接受到，这是为什么，代码如下：

说明：代码可以直接在浏览器下运行查看效果，结果会在控制台打印。

<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
<div id="app">
    <child v-on:test='getEmit'></child>
</div>
<script type="text/javascript">
var Template={
    'child':{
        template:'<button v-on:click="func()"  ref="butt">{{name}}</button>',
        data:function(){
            return {
                'name':'nihao'
            }
        },
        methods:{
            func:function(){
                console.log("输出button内容"+this.$refs.butt.textContent);
                vm.$emit('test', this.$refs.butt.textContent)
            }
        }
    }
};
var vm=new Vue({
    el:'#app',
    data:{},
    methods:{
        getEmit:function(){
            // 这里没有输出，为什么
            console.log("div触发");
        }
    },
    components:Template
});
// vm.$on('test',function(e){
//     console.log('on触发输出内容'+e);
// });
</script>

Answer 1

将func里面的的vm改为this就好了哦，因为emit是子组件提交事件的呢，可以看看官网api进而了解一下

Answer 2

 template:'<button v-on:click="func()"  ref="butt">{{name}}</button>',

改成

 template:'<button v-on:click="func"  ref="butt">{{name}}</button>',