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&nbsp;v-on:click="func()"&nbsp;ref="butt">{{name}}</button>',改成template:'<button&nbsp;v-on:click="func"&nbsp;ref="butt">{{name}}</button>',