Vue事件解读之$emit

来源：互联网发布：js查找兄弟节点编辑：程序博客网时间：2024/06/08 10:15

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

DOM事件

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

<div v-on:click="doSomething"></div><div @click="doSomething"></div>

自定义事件

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

$emit
参考Vue文档$emit

vm.$emit( event, […args] )
参数：
{string} event
[…args]//可选参数
触发当前实例上的事件。附加参数都会传给监听器回调。

$emit 返回一个布尔值，取决于父链上的是否存在该事件的监听器以及事件处理程序返回的值

// app.vue<template>  <test @childevent="childEventHandler"></test></template>methods: {    childEventHandler () {}}// test.vuemethods: {    emitEvent () {      this.$emit('childevent'/* , this.somedata */)    }}

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

//header.vue<template>    <a class="t-btn" @click="showTools"></a></template>export default{    methods: {        showTools(){            this.$emit('tools');        }    }}//App.vue<template>    <n-header @tools="changePages"></n-header></template>export default{    data(){        return{            tools:false,            table:false        }    },    methods:{        changePages(){            if(this.table){                this.table = !this.table;            }else{                this.tools = !this.tools            }        }    }}

0 0