关于vue.js中this.$emit的理解使用

关于vue.js中this.$emit的理解与使用攻略

什么是this.$emit？

在Vue.js中，this.$emit()是一个特殊的方法，用于定制组件的自定义事件。

在子组件中使用this.$emit(eventName, data)可以触发父组件的自定义事件，这样父组件就能够在监听到该事件后进行相应的处理。

this.$emit使用方法

在Vue.js中，使用this.$emit有两个参数：

• eventName （必选）：自定义事件的名称，可以是任何字符串，但最好遵循驼峰式命名的规范。

• data （可选）：传递给父组件的数据。

下面是一个用法示例：

Vue.component('child-component', {
  template: `
  <div>
    <button @click="notify">触发自定义事件</button>
  </div>
  `,
  methods: {
    notify() {
      this.$emit('custom-event');
    }
  }
})

new Vue({
  el: '#app',
  methods: {
    handleCustomEvent() {
      alert('自定义事件被触发了！');
    }
  }
})

在这个示例中，我们定义了一个子组件child-component，其中包含一个按钮，当按钮被点击时，调用notify()方法并触发'custom-event'自定义事件。在父组件中，绑定'custom-event'自定义事件并在handleCustomEvent()方法中处理。

this.$emit实现父子组件之间通信的案例

下面这个示例展示了在父子组件之间通过this.$emit来进行通信的方法。

父组件 App.vue 代码：

<template>
  <div id="app">
    <h1>父组件</h1>
    <ChildComponent @childEvent="handleChildEvent"></ChildComponent>
    <div v-if="show">
      子组件触发了自定义事件！
    </div>
  </div>
</template>

<script>
import ChildComponent from './components/ChildComponent.vue';

export default {
  name: 'App',
  components: {
    'ChildComponent': ChildComponent
  },
  data() {
    return {
      show: false
    }
  },
  methods: {
    handleChildEvent() {
      this.show = true;
    }
  }
}
</script>

子组件 ChildComponent.vue 代码：

<template>
  <div>
    <h2>子组件</h2>
    <button @click="emitEvent">触发自定义事件</button>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  methods: {
    emitEvent: function() {
      this.$emit('childEvent');
    }
  }
}
</script>

在这个案例中，子组件中的按钮被点击时，调用emitEvent方法，触发'childEvent'自定义事件。在父组件中，监听到'childEvent'自定义事件后，调用handleChildEvent方法将show的值设置为true，这样就可以在页面中看到"子组件触发了自定义事件！"这个提示了。

通过这个案例可以发现，this.$emit方法非常方便，能够实现父子组件之间的通信，同时也能够通过传递数据来传递信息。