vue组件中v-on:click="$emit('函数名')"失效？

Question

vue组件中v-on:click="$emit('函数名')"失效？

html

<div id="app">
    <div v-bind:style="{fontSize:size + 'em'}">
        <p>large</p>
        <large v-on:enlarge="size+=1"></large>
    </div>
</div>

js

<script>
    Vue.component('large',{
        template:'<button v-on:click="$emit('enlarge')">click me to large</button>'
    })

    new Vue({
        el:'#app',
        data:{
            size:1
        }

    })
</script>

上面直接调用$emit('enlarge')浏览器运行错误
改成以下在函数中调用就行了

 Vue.component('large',{
        template:'<button v-on:click="enlarge1">click me to large</button>',
        methods:{
            enlarge1:function(){
                this.$emit('enlarge')
            }
        }
    })

请问第一种为什么不行，第一种不是Vue官网文档的写法吗？

Answer 1

官网用的是模板字符串``你用的是字符串