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

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中不传递任何参数，那么此组件绑定的所有自定义事件都会解绑

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