Vue自定义组件父组件实现@click点击事件绑定的方法(实现计数器)

自定义组件的实现中,是实现一个计数器编程,原本是绑定在子元素上的@click事件,尝试绑定在自定义组件的父元素上进行实现。
原来的子元素绑定实现计数器代码如下:

<body>
   <div id="app">
        <button @click='changeFlag'>点击切换{{flag}}</button>
        <info title="hello" :visable="flag"></info>
        <info title="world" :visable="flag"></info>
        <info></info>
    </div>
</body>
 Vue.component("info",{
        template:`
            <div style="width:800px;height:200px;border-radius:5px;background-color:lightblue;margin:1em;padding:1em" @click="countAdd"v-if="visable">
            <div><h2>标题:{{title}}-{{typeofTitle}}</h2></div>
            <div>自定义组件,计数器:{{count}}</div>
            <div>
        `,
        data(){
            return{
                count:0,
            }
        },
        methods:{
            countAdd(){
                this.count++;
            }
        },
        props:{
            title:String,
            visable:Boolean
        },
        // props:["title","visable"],
        computed:{
            typeofTitle(){
                return typeof this.visable;
            }
        }
        
            })
    new Vue({
        el:"#app",
        data:{
            flag:true,
        },
        methods:{
            changeFlag(){
                this.flag=!this.flag;
            },

        }
    })

此时@click实现计数器加+1的事件绑定在子元素上,在这里插入图片描述
然后想测试把@click元素绑定到父元素中去。
先进行事件的父元素绑定:
在这里插入图片描述将其中的一个自定义组件,设置@click事件绑定,刚开始的思路是设置@click=“countAdd”这样的代码,但是实现是失败的。
原因是给vue组件绑定事件时候,必须加上native ,否则会认为监听的是来自Item组件自定义的事件
等同于在子组件中: 子组件内部处理click事件然后向外发送click事件:$emit(“click”.fn)
<info @click.native = “shijian()”>
添加代码如下

 Vue.component("info",{
        template:`
            <div style="width:800px;height:200px;border-radius:5px;background-color:lightblue;margin:1em;padding:1em" @click="countAdd"v-if="visable">
            <div><h2>标题:{{title}}-{{typeofTitle}}</h2></div>
            <div>自定义组件,计数器:{{count}}</div>
            <slot></slot>
            <div>
        `,
        data(){
            return{
                count:0,
            }
        },
        methods:{
            countAdd(){
                this.count++;
            }
        },
        props:{
            title:String,
            visable:Boolean
        },
        // props:["title","visable"],
        computed:{
            typeofTitle(){
                return typeof this.visable;
            }
        }
        
            })
 new Vue({
        el:"#app",
        data:{
            flag:true,
            count:0,
        },
        methods:{
            changeFlag(){
                this.flag=!this.flag;
            },
            countAdd(){
                console.log(this.count)
                this.count++;
            }
        }
    })
   

在Vue方法中,添加事件响应绑定对应的countAdd方法,以及数据中的count方法。在子元素的自定义中,添加显示count 的设置,添加插槽代码中已经设置。
在body中自定义组件中添加插槽显示count
在这里插入图片描述{{count}}
上面代码中已经设置,是总结一下需要添加的地方。
然后就可以实现父元素绑定@click事件。
在这里插入图片描述图中:“自定义组件:计数器:6”中的6是子元素绑定click事件实现的计数器。
下面的6是插槽显示数据,父元素绑定的click事件实现的click事件。

希望对您有所帮助。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值