为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

肥皂起泡泡 2019-03-21 23:15:49
在下面的代码(只是一部分代码)中,在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");                }            }        });
查看完整描述

4 回答

?
慕森卡

TA贡献1806条经验 获得超8个赞

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


查看完整回答
反对 回复 2019-04-08
?
凤凰求蛊

TA贡献1825条经验 获得超4个赞

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


查看完整回答
反对 回复 2019-04-08
?
繁星点点滴滴

TA贡献1803条经验 获得超3个赞

<button @click.native="test">按钮</button>

试一下 事件修饰服


查看完整回答
反对 回复 2019-04-08
  • 4 回答
  • 0 关注
  • 4021 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信