vue子組件實例上不能觸發(fā)click事件？

在下面的代碼（只是一部分代碼）中，在sss按鍵能觸發(fā)click事件函數(shù)test，但是在nav-item組件上的click事件不能夠觸發(fā)？？？查閱了一些資料，也一直沒找到答案

但是有一個解決辦法就是在子組件內(nèi)部拋出一個自定義事件，然后在組件實例上接收該事件，這樣可以觸發(fā)自定義的事件，但是下面這樣使用click事件不能觸發(fā)就搞不懂，所以想請教一下大家

<div id="app" class="content">

        <div class="nav bg_red">
            <div class="nav_items">
                <nav-item v-for="item in nav_item_title" v-bind:key="item" v-bind:itemname="item" v-bind:class="['item-label','bg_red',{bg_white:current_page==item}]" v-on:click="test"></nav-item>
            </div>
            <button class="item-label bg_red" v-on:click="test">ssss</button>
        </div>
        <component v-bind:is="current_component"></component>
    </div>
    <script>
    Vue.component("nav-item",{
            props:['itemname'],
            template:"<button>{{itemname}}</button>",
            methods:{
                togg:function(){
                    this.$emit("toggle",this.itemname)
                },
                battle:function(){
                    alert(this.itemname);
                }
            }
        });
    var app=new Vue({
            el:'#app',
            data:{
                nav_item_title:['page1','page2','page3','page4'],
                current_page:'page1'
            },
            computed:{
                current_component:function(){
                    return "tab-"+this.current_page;
                }
            },
            methods:{
                activeitem:function(name){
                    this.current_page=name;
                },
                test:function(){
                    alert("this");
                }
            }
        });