vue子组件实例上不能触发click事件？

Question

在下面的代码（只是一部分代码）中，在sss按键能触发click事件函数test，但是在nav-item组件上的click事件不能够触发？？？查阅了一些资料，也一直没找到答案

但是有一个解决办法就是在子组件内部抛出一个自定义事件，然后在组件实例上接收该事件，这样可以触发自定义的事件，但是下面这样使用click事件不能触发就搞不懂，所以想请教一下大家

<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");

                }

            }

        });

Answer 1

由于nav-item为自定义组件的实例，使用on直接绑定事件只能绑定自定义的事件，即在组件内部使用emit('name')的方式抛出的事件，如果在子组件实例上绑定原生的事件，需要使用.native的事件修饰符。因为button不是自定义组件，所以可以直接绑定原生事件，也不用一楼所说那样传入参数

Answer 2

子组件通过emit方式向父组件传递事件，父组件不是通过@click调用，你这里应该是@toggle="test"

Answer 3

<button @click.native="test">按钮</button>试一下 事件修饰服