Vue自定义事件解读

来源：互联网发布：超市销售量的数据编辑：程序博客网时间：2024/05/22 01:28

Vue事件分两部分，一是DOM绑定事件，二是自定义事件。

一.DOM事件

在Vue中可通过v-on指令或事件语法糖@来为DOM元素绑定事件

二.自定义事件

Vue自定义事件是为组件间通信设计，自定义事件提供$on、$off、$once、$emit、$broadcast、$dispatch 几个 api,只是在2.0版本中，$broadcast、$dispatch已不再使用。

1.$on

vm.$on( event, callback )
参数：
{string | Array<string>} event (数组只在 2.2.0+ 中支持)
{Function} callback

用法：
监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>组件传值</title> <script src="vue.js"></script></head><body><div id="box">    <child1></child1>    <child2></child2></div><template id="c1">    <h1>哥哥说:{{msg}} <button @click='fn'>点击</button></h1></template><template id="c2">    <h3>弟弟说:{{msg2}}</h3></template></body></html><script>var Hub=new Vue();  // 1) 中转站,其中不需要设置任何参数var vm=new Vue({    el: '#box',    components:{        child1:{            template:'#c1',            data:function(){                return {                    msg: '弟弟，hello'                }            },            methods:{               fn:function(){                   // 2) 主动触发监听(中转站触发监听)                   Hub.$emit('change',this.msg) //$emit触发监听方法               }            }        },        child2:{            template:'#c2',            data:function(){                return {                    msg2: '哥哥 hello'                }            },            // 创建完成  new Vue  create mount            created(){                // 3) 接收监听  $on('事件名称',function(val){}) val是传递过来的值                console.log('第1次：'+ this.msg2);                Hub.$on('change',function(val){                    Hub.msg2 = val;                    console.log('第二次：'+ this.msg2);//弟弟，hello                })              }        }    }})</script>

点击按钮“点击”--$on接收到哥哥child1传过来的值。

注意：

（1）.$emit('change')和$on('change'),事情名得一样。

(2).eventbus在是同一级的组件中传递数据；在父子组件间是没有刷新页面，不会运行$on。而父子组件间的通信用props

还存在的问题：$on接收的值不能更新data的值，如果有解决方式，欢迎指教。

2.$emit

vm.$emit( event, […args] )
参数：
{string} event […args]//可选参数

用法：
监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。
触发当前实例上的事件。附加参数都会传给监听器回调。$emit 返回一个布尔值，取决于父链上的是否存在该事件的监听器以及事件处理程序返回的值。

eg: App.vue中v-on为组件绑定事件(自定义事件)，子组件通过$emit触发事件

(1).App.vue

<template>  <div id="app">    <p>{{title}}</p>    <p>{{ selectType}}</p>    <gfooter    @select-type="onSelectType"></gfooter>    </div></template><script> import gfooter  from './components/gfooter.vue'    import Vue from 'vue';export default {  name: 'app',  data: function () {    return {       title:'子组件通过$emit触发事件，将参数传递',      selectType: 0,    }   },  components:{gfooter},    methods:{  //在methods对象中定义方法      onSelectType (type) {        this.selectType = type      }  }  }</script>

（2）gfooter.vue

<template> <div  class="footer">    <span @click="select(0, $event)"  :class="{'active': selectType===0}">0</span>    <span @click="select(1, $event)"  :class="{'active': selectType===1}">1</span>    <span @click="select(2, $event)"  :class="{'active': selectType===2}">2</span> </div></template><script>export default {  name: 'footer',  data () {    return {      selectType: 0,    }  },  methods:{    select (type, event) {      this.selectType = type      this.$emit('select-type', type)    }  }}</script><style scoped>.footer{  background:#ccc;  line-height:35px;  font-size:1.2rem;}.footer span{    width: 30px;    border: 1px solid #000;    height: 30px;    display: inline-block;    vertical-align: middle;}.footer span.active{  border:1px solid #f00;}</style>

父组件使用@select-type="onSelectType"监听由子组件vm.$emit触发的事件，通过onSelectType()接受从子组件传递过来的数据，通知父组件数据改变了。

3.$once

vm.$once( event, callback )
参数：
{string} event {Function} callback
用法：
监听一个自定义事件，但是只触发一次，在第一次触发之后移除监听器。

4.$off

vm.$off( [event, callback] )

参数：
{string | Array<string>} event (只在 2.2.2+ 支持数组)
{Function} [callback]

用法：
a.移除自定义事件监听器。
b.如果没有提供参数，则移除所有的事件监听器；
c.如果只提供了事件，则移除该事件所有的监听器；
d.如果同时提供了事件与回调，则只移除这个回调的监听器。

阅读全文

0 0