Vue.js this.parent.emit 和 this.$emit 之间的区别

在本文中，我们将介绍 Vue.js 中 this.parent.emit 和 this.$emit 的区别和用法。Vue.js 是一种流行的 JavaScript 框架，被广泛用于构建用户界面。它采用了组件化的开发方式，使得开发者可以更好地管理和复用代码。

阅读更多：Vue.js 教程

this.parent.emit

在 Vue 的组件中，每个组件都有一个 parent 属性，用于访问其父组件。通过 this.parent，我们可以在子组件中访问和调用父组件的方法和属性。而 this.parent.emit 则是用于在子组件中触发父组件的事件。

通常情况下，当子组件需要向父组件通信时，我们会使用 this.parent.emit。父组件可以通过在模板中监听子组件触发的事件来收到通知。这种方式适用于父子组件之间简单的单向通信。

以下是一个示例，说明了 this.parent.emit 的用法：

<!-- 父组件 -->
<template>
  <div>
    <child-component @custom-event="handleEvent"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleEvent(data) {
      // 处理子组件触发的事件
      console.log(data)
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <button @click="triggerEvent">触发父组件事件</button>
  </div>
</template>

<script>
export default {
  methods: {
    triggerEvent() {
      // 子组件触发父组件事件
      this.parent.emit('custom-event', 'Hello from child component')
    }
  }
}
</script>

在上面的示例中，当点击子组件中的按钮时，子组件会触发父组件中的 custom-event 事件，并传递一个字符串参数。父组件通过监听这个事件，并通过 handleEvent 方法处理触发的事件。

this.$emit

与 this.parent.emit 不同，this.emit 可以直接在当前组件中触发和处理事件。它可以用于组件自身的事件传递和通信。

以下是一个示例，说明了 this.emit 的用法：

<!-- 组件 -->
<template>
  <div>
    <button @click="triggerEvent">触发事件</button>
    <child-component @custom-event="handleEvent"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleEvent(data) {
      // 处理子组件触发的事件
      console.log(data)
    },
    triggerEvent() {
      // 组件自身触发事件
      this.$emit('custom-event', 'Hello from parent component')
    }
  }
}
</script>

在上面的示例中，当点击组件内的按钮时，组件会触发 custom-event 事件，并传递一个字符串参数。子组件通过监听这个事件并通过 handleEvent 方法处理。

总结

在 Vue.js 中，this.parent.emit 和 this.emit 都用于组件间的事件通信，但有一些区别。this.parent.emit 用于子组件触发父组件的事件，适用于简单的单向通信；而 this.emit 则用于组件自身触发和处理事件，适用于组件自身的事件传递和通信。

根据具体的需求，我们可以选择合适的方法进行组件间的通信。使用这些方法能够使我们的代码更加清晰和可维护，提高开发效率。希望本文对于理解和使用 Vue.js 中的组件通信有所帮助。