Vue教程18：组件间通信之二：通过事件通信

最新推荐文章于 2025-04-08 23:04:14 发布

原创最新推荐文章于 2025-04-08 23:04:14 发布 · 217 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #Vue

Vue 专栏收录该内容

25 篇文章

订阅专栏

本文详细介绍了如何在Vue.js中实现组件间的通信，通过使用$emit和$on方法，演示了父组件如何向子组件发送事件，以及子组件如何响应这些事件。提供了具体的代码示例，包括如何在组件的生命周期中设置事件监听器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过$emit触发事件，通过$on接收事件，实现通信

代码示例：/lesson17/src/components/parent.js，/lesson17/src/components/child.js

通过调用组件实例的$emit(事件名, 参数)，向组件发送一个事件。
在组件的生命周期created中，使用\this.$on(事件名, 回调函数)，在回调函数中可以接收到参数，以此实现组件间通信。

父组件代码：

export default Vue.component('parent', {
  data() {
    return {
      num: 0,
    };
  },
  components: {
    Child
  },
  created() {
    this.$on('add', function (n) {
      this.num = this.num + n
    })
  },
  methods: {
    addChild() {
      this.$refs.child.$emit('add', 5)
    },
  },
  template: `
    <div>
      <div>父级
      num：{{num}}
      <br/><input type="button" value="子级num1 + 5" @click="addChild" />
      <child ref="child" :parent="this"></child>
    </div>
  `
});

子组件代码：

export default Vue.component('parent', {
  props: ['parent'],
  data() {
    return {
      num: 0,
    };
  },
  methods: {
    addParent() {
      this.parent.$emit('add', 5)
    },
  },
  created() {
    this.$on('add', function (n) {
      this.num = this.num + n
    })
  },
  template: `
    <div>
      子级
      num：{{num}}
      <br/><input type="button" value="父级num1 + 5" @click="addParent" />
    </div>
  `
});