in the following code (only part of the code), the sss key can trigger the click event function test, but the click event on the nav-item component cannot be triggered? I checked some materials, but I haven"t found the answer all the time.
but one solution is to throw a custom event inside the subcomponent, and then receive the event on the component instance, which can trigger the custom event, but it is difficult to understand if the click event cannot be triggered in this way, so I would like to ask you
< 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:"-sharpapp",
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");
}
}
});