---

Vue.js 组件 - 自定义事件

Vue.js是一个流行的JavaScript框架，用于构建交互式用户界面。它引入了组件概念，使得开发者可以将页面划分为小的、可重用的部件。组件通过props传递数据和事件机制进行通信，Vue.js还提供了自定义事件的机制，从而能够更好地实现跨组件通信。

什么是Vue.js自定义事件？

自定义事件是Vue.js中组件间通信的一种方式。在父组件中使用v-on指令监听子组件触发的特定事件。当子组件触发该事件时，父组件可以响应并执行相应的方法。与普通的DOM事件不同，Vue.js自定义事件是在组件实例上直接触发和监听的。

自定义事件具有以下特点：

1. 自定义事件和普通的DOM事件不同，因为自定义事件只在Vue.js组件内部触发和监听。
2. 子组件触发自定义事件时，可以提供一个可选数据作为参数，父组件可以接收并使用该数据。
3. 父组件可以在监听自定义事件时设置一个表达式或方法，用于响应子组件触发的事件。

使用Vue.js自定义事件

Vue.js自定义事件主要有两个步骤：

1. 在子组件中定义自定义事件；
2. 在父组件中监听此自定义事件。

定义子组件自定义事件

在子组件中定义自定义事件需要使用Vue.js的$emit方法。

下面是一个简单的例子。假设一个子组件名为child-component，用户在输入框中输入一个文本时，该子组件会触发一个自定义事件input-change，并将文本内容作为参数传递给父组件：

<template>
  <div>
    <input type="text" v-model="textInput" @input="handleInput">
  </div>
</template>

<script>
  export default {
    data() {
      return {
        textInput: ''
      }
    },
    methods: {
      handleInput() {
        this.$emit('input-change', this.textInput)
      }
    }
  }
</script>

在上面的代码中，$emit方法会将自定义事件名（input-change）和可选的参数（this.textInput）传递到父组件。如果没有传递任何参数，$emit方法将触发一个不带参数的事件。

监听子组件自定义事件

在父组件中使用v-on指令来监听子组件中触发的自定义事件。

假设父组件需要获取子组件中输入框中的文本内容，并在页面上显示出来：

<template>
  <div>
    <child-component @input-change="updateText"></child-component>
    <p>{{text}}</p>
  </div>
</template>

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

  export default {
    components: {
      'child-component': ChildComponent
    },
    data() {
      return {
        text: ''
      }
    },
    methods: {
      updateText(data) {
        this.text = data
      }
    }
  }
</script>

在上面的代码中，我们使用@input-change="updateText"监听了子组件的自定义事件。当子组件触发自定义事件时，父组件的updateText方法将被调用。

总结

Vue.js自定义事件是一种方便的组件通信机制。通过$emit方法，子组件可以将自定义事件及其数据发送到父组件。在父组件中，使用v-on指令就能够方便地监听子组件的自定义事件，并执行相应的方法来处理数据。这种机制非常适合需要实现跨组件通信的场景。