每日一学vue2：自定义绑定事件解除方式（$off）及销毁vc

淼学派对

发布于 2022-11-20 13:14:21

3.2K00

代码可运行

文章被收录于专栏：云开发小程序1云开发小程序1

运行总次数：0

代码可运行

自定义事件的解绑

运用$off这个api来实现

1.解绑一个自定义事件时

举例：

StudentLqj.vue:

<template>
                        <button @click="sendStudentName">把学生名给App</button>
                        //上面是给app里的：（atlqj）做出的绑定事件
                        <button @click="unbind">把学生名给App</button>
                        //上面是给app里的：（atlqj）做出的解绑事件
                </template>

<script>
                        ...
                        methods:{
                                sendSchoolName(){
                                        this.$emit('atlqj',this.name)       
                                                },

                                unbind(){
                                        this.$off('atlqj')
                                        }                        
                                }
                </script>

2.解绑多个自定义事件时

我们再在app.vue里面定义一个事件demo 所有在StudentLqj.vue里面的methods里面之前定义的函数（sendStudentName）需要在配置: this.$emit('demo')

注意：如果我们相同时解除绑定这两个（或者你可以再写的多一些自定义绑定事件，道理都是一样的），需要借助子组件（StudentLqj.vue）中的： <button @click="unbind">解绑</button> 这个按钮，来与下面的按钮事件配合（如下）： unbind（）{ this.

App.vue：

<template>
               <StudentLqj v-on:atlqj="getStudentName" @demo="m1"></StudentLqj>   
        </template>

        <script>
                methods:{
                        getStudentName(name){
                                console.log('App收到了学生名:',name)
                        },
                        m1(){
                                console.log('demo事件被触发了！')
                        }
                },
                ...
        </script>

StudentLqj.vue:

<template>
               <button @click="sendStudentName">把学生名给App</button>
                <button @click="unbind">把学生名给App</button> 
        </template>

        <script>
                ...
                methods:{
                        sendStudentName(){
                                this.$emit('atlqj',this.name)
                                this.$emit('demo')
                        },
                        unbind(){
                                this.%off(['atlqj','demo'])
                        }
                }
        </script>

注意：this.$off()是解绑默认的所有自定义事件的值

列表： this.off('xxx')解除一个xxx自定义绑定事件 this.off(['xxx','yyy'])解除xxx和yyy自定义绑定事件 this.

3.组件实例对象（vc）销毁

如果一个组件的的实例对象（vc）被销毁了，那它身上的组件自定义组件也就跟着不起作用了！

StudentLqj.vue:

<template>
                <button @click="sendStudentName">把学生名给App</button>
                <button @click="death">销毁student子组件的vc</button>
        </template>

        <script>
                ...
                death(){
                        this.$destroy()//销毁了当前的student组件实例（vc）
                        }
                ...
        </script>

如果点击销毁当前子组件的按钮，不需要点击解绑的按钮，自定义绑定事件则不起作用， 因为子组件的vc都没有了！

只要路飞还在笑，我的生活没烦恼！

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-09-28，如有侵权请联系 cloudcommunity@tencent.com 删除

vue.js

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

vue.js

登录后参与评论

0 条评论

热度