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

自定义事件的解绑

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

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