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

最新推荐文章于 2023-06-26 12:48:23 发布

头发多多程序媛

最新推荐文章于 2023-06-26 12:48:23 发布

阅读量3.3k

点赞数

分类专栏： vue 自定义组件文章标签： javascript vue.js

本文链接：https://blog.csdn.net/weixin_46816740/article/details/108531459

版权

vue 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

自定义组件

1 篇文章 0 订阅

订阅专栏

自定义组件的实现中，是实现一个计数器编程，原本是绑定在子元素上的@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
评论
Vue自定义组件父组件实现@click点击事件绑定的方法（实现计数器）

自定义组件的实现中，是实现一个计数器编程，原本是绑定在子元素上的@click事件，尝试绑定在自定义组件的父元素上进行实现。原来的子元素绑定实现计数器代码如下：<body> <div id="app"> <briup-info>{{count}}</briup-info> </div></body> Vue.component("briup-info",{ template:`
复制链接

扫一扫

专栏目录