关于前端:自定义事件学习

1、什么是自定义事件？

    自定义事件顾名思义，就是咱们本人定义的事件，事件的名称以及回调等都由咱们本人设计实现。

2、自定义事件是干什么用的？

    自定义事件是一种组件间的通信形式，实用于子组件向父组件传值。

3、自定义事件的代码实现：

第一种形式：

父组件通过 v -on 定义自定义事件
v-on 能够简写为 @
例：v-on:demo=”send” 能够写为 @demo=”send”

父组件：App.vue：<template>
   <div class="app">
       <h1>{{msg}}</h1>
       <TestA v-on:demo="send"/>
   </div>
</template>

<script>
import TestA from './components/TestA'
   export default {
       name:'App',
       components:{TestA},
       data(){
           return{msg:'自定义事件'}
       },
       methods:{send(name){console.log('send 被调用了', name)
           },
       },
   }
</script>

子组件通过 $emit 向父组件传值

子组件：TestA.vue:

<template>
    <div>
        <button @click="sendName"> 点击触发自定义事件 </button>
      </div>
</template>

<script>
export default {
    name:'TestA',
    data(){
        return{
            name:'路飞',
            age:18
        }
    },
    methods:{sendName(){this.$emit('demo',this.name)
        }
    }
}
</script>

第二种形式：

通过 ref 属性拿到 TestA 组件组件的实例对象（vc），在组件挂载实现之后（mounted）应用 this.$refs. 组件名.$on(‘ 自定义事件名 ’, 回调函数)实现对子组件自定义事件的绑定

父组件：App.vue：<template>
   <div class="app">
       <h1>{{msg}}</h1>
       <TestA ref="testa"/>
   </div>
</template>

<script>
import TestA from './components/TestA'
   export default {
       name:'App',
       components:{TestA},
       data(){
           return{msg:'自定义事件'}
       },
       methods:{send(name){console.log('send 被调用了', name)
           }
       },
       mounted(){this.$refs.testa.$on('demo',this.send)
   }
</script>

子组件没有变动

子组件：TestA.vue:

<template>
    <div>
        <button @click="sendName"> 点击触发自定义事件 </button>
      </div>
</template>

<script>
export default {
    name:'TestA',
    data(){
        return{
            name:'路飞',
            age:18
        }
    },
    methods:{sendName(){this.$emit('demo',this.name)
        }
    }
}
</script>

一次性自定义事件：

v-on: 事件名.once="XXXX"
或者
this.$refs.ref 属性名.$once("事件名", 事件内容)

留神：因为是子组件向父组件传值，所以传值的动作在子组件中；父组件接管子组件的数据，所以绑定的动作在父组件中。
4、自定义事件解绑的代码实现：
父组件没有变动，子组件中通过 $off 解绑自定义事件

子组件：TestA.vue:

<template>
    <div>
        <button @click="sendName"> 点击触发自定义事件 </button>
        <button @click="noBand"> 解绑自定义事件 </button>
      </div>
</template>

<script>
export default {
    name:'TestA',
    data(){
        return{
            name:'路飞',
            age:18
        }
    },
    methods:{sendName(){this.$emit('demo',this.name)
        }，noBand(){this.$off('demo');
    }
}
</script>

留神：
如果要解绑多个事件，this.$off([“demo1”,”demo2″…]);
如果 this.$off 中不传递任何参数，那么此组件绑定的所有自定义事件都会解绑

总结：
自定义事件是理论开发工作中比拟罕用的办法，在进行某些操作时，应用自定义事件能够节俭开发工夫，缩小代码冗余，进步工作效率。