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

自定义事件的解绑

运用$off这个api来实现

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

举例：

StudentLqj.vue:

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

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

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

        注意：如果我们相同时解除绑定这两个（或者你可以再写的多一些自定义绑定事件，道理都是一样的），
        需要借助子组件（StudentLqj.vue）中的：
        解绑
        这个按钮，来与下面的按钮事件配合（如下）：
        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">把学生名给Appbutton>
                <button @click="unbind">把学生名给Appbutton> 
        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">把学生名给Appbutton>
                <button @click="death">销毁student子组件的vcbutton>
        template>
 
        <script>
                ...
                death(){
                        this.$destroy()//销毁了当前的student组件实例（vc）
                        }
                ...
        script>

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

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