Vue.js 中的 emit 和 on 事件传递

在 Vue.js 中，组件之间的通信是非常重要的。为了实现组件之间的通信，Vue.js 提供了一种非常方便的方式，就是通过 emit 和 on 事件传递。

emit 和 on 事件传递的作用

在 Vue.js 中，emit 和 on 事件传递主要用于父组件和子组件之间的通信。当子组件需要向父组件传递数据时，可以通过 emit 事件来触发父组件的事件，从而传递数据。而当父组件需要向子组件传递数据时，可以通过 props 属性来传递数据。

emit 和 on 事件传递的使用方法

在子组件中，可以通过 this.$emit() 方法来触发一个事件，在父组件中可以通过 v-on 指令来监听这个事件。

下面是一个示例代码：

// javascriptcn.com 代码示例
<template>
  <div>
    <button @click="changeCount">Change Count</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        count: 0
      }
    },
    methods: {
      changeCount() {
        this.count++;
        this.$emit('countChange', this.count);
      }
    }
  }
</script>

在上面的代码中，子组件通过 this.$emit('countChange', this.count) 触发了一个名为 countChange 的事件，并传递了一个参数 this.count。在父组件中，可以通过 v-on 指令来监听这个事件，如下所示：

// javascriptcn.com 代码示例
<template>
  <div>
    <child-component @countChange="handleCountChange"></child-component>
    <p>Count: {{ count }}</p>
  </div>
</template>

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

  export default {
    components: {
      ChildComponent
    },
    data() {
      return {
        count: 0
      }
    },
    methods: {
      handleCountChange(count) {
        this.count = count;
      }
    }
  }
</script>

在上面的代码中，父组件通过 v-on 指令监听了子组件的 countChange 事件，并在事件处理函数 handleCountChange 中更新了父组件的 count 数据。

总结

通过上面的示例代码可以看出，emit 和 on 事件传递在 Vue.js 中非常方便，可以实现父组件和子组件之间的通信。在实际开发中，我们可以根据具体的业务需求来使用 emit 和 on 事件传递。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/657ad057d2f5e1655d54b786