Vue.js 中如何通过 emit 向父组件传递数据-JavaScript中文网-JavaScript教程资源分享门户

在 Vue.js 中，组件是构建用户界面的基本单元，而组件之间的通信是必不可少的。有时候，子组件需要向其父组件传递数据，这时可以使用 Vue.js 提供的 emit 方法。

emit 方法的用途和作用

emit 方法是 Vue.js 中一个非常重要的方法，它用于向父组件传递数据。在子组件中，可以通过 emit 方法触发一个自定义事件，并将需要传递的数据作为参数传递给该事件。在父组件中，可以监听该事件，并在事件回调函数中处理传递过来的数据。

在子组件中使用 emit 方法

在子组件中，要使用 emit 方法，首先需要在子组件中定义一个自定义事件。可以通过 Vue.js 的 $emit 方法来触发该事件，并将需要传递的数据作为参数传递给该事件。下面是一个示例：

// javascriptcn.com 代码示例
<template>
  <div>
    <button @click="sendData">向父组件传递数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendData() {
      this.$emit('custom-event', { message: 'Hello, world!' })
    }
  }
}
</script>

在上面的代码中，我们定义了一个名为 custom-event 的自定义事件，并在 sendData 方法中调用了 $emit 方法触发该事件，并将一个包含 message 属性的对象作为参数传递给该事件。

在父组件中监听自定义事件

在父组件中，可以通过 v-on 指令来监听子组件触发的自定义事件，并在事件回调函数中处理传递过来的数据。下面是一个示例：

// javascriptcn.com 代码示例
<template>
  <div>
    <child-component @custom-event="handleCustomEvent"></child-component>
    <p>{{ message }}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: ''
    }
  },
  methods: {
    handleCustomEvent(data) {
      this.message = data.message
    }
  }
}
</script>

在上面的代码中，我们在父组件中使用 v-on 指令监听子组件触发的 custom-event 自定义事件，并在 handleCustomEvent 回调函数中处理传递过来的数据。在该示例中，我们将传递过来的 message 数据绑定到了 message 属性上，以便在父组件中显示。

总结

通过上面的示例，我们可以看到，使用 emit 方法向父组件传递数据非常简单。在子组件中，只需要定义一个自定义事件，并在需要传递数据的地方调用 $emit 方法触发该事件即可。在父组件中，只需要使用 v-on 指令监听子组件触发的自定义事件，并在事件回调函数中处理传递过来的数据即可。通过这种方式，我们可以在 Vue.js 中实现组件之间的数据传递，从而构建更加灵活和复杂的用户界面。

参考资料

Vue.js 官方文档

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