自定义事件的解绑

运用




$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.$off([‘atlqj’,’demo’])

}


我们可以想一想，如果想解除一个自定义事件的话可以这样写：


this.$off(‘atlqj’)


那如果我们要接触多个自定义事件的话，我们是不是可以通过一个数组的形式来将他们写到一块，然后再接触绑定？

o~k！没错滴！

详细代码如下：

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.$off()默认解除所有的自定义绑定事件

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都没有了！

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