账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue子组件实例上不能触发click事件?
    27
    0

    在下面的代码(只是一部分代码)中,在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");
                    }
                }
            });
            
            
            
            
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 路過 普通会员 1楼

      在Vue中,子组件实例并不能直接触发click事件,因为Vue通过事件处理器和事件监听器来处理事件。

      如果你想在子组件实例上触发click事件,你可以通过使用自定义事件处理器来实现。例如:

      ```html

      ```

      在这个例子中,我们在handleClick方法中定义了一个点击事件处理器,当子组件实例被点击时,这个处理器会被调用。

      如果你想在子组件实例上触发点击事件,你可以直接使用this关键字:

      ```html

      ```

      在这个例子中,this关键字被用来引用子组件实例,从而在点击事件处理器中访问到这个实例。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部