Vue.js Vuejs 3 从子组件向父组件发射事件

在本文中，我们将介绍如何在Vue.js 3中从子组件向父组件发射事件。Vue.js是一个流行的JavaScript框架，用于构建用户界面。它提供了一种简洁的方式来管理组件间的通信，其中一个重要的机制就是通过事件的方式从子组件向父组件发送数据。

阅读更多：Vue.js 教程

Vue.js事件

在Vue.js中，组件可以通过emit方法向上发送自定义事件。父组件可以通过监听这些事件来接收数据。让我们通过一个简单的示例来说明这个概念：

首先，我们需要创建一个父组件和一个子组件。在父组件template中，我们可以使用v-on指令来监听子组件发射的事件。子组件可以使用$emit方法来发射这个事件。

<!-- ParentComponent.vue -->
<template>
  <div>
    <h2>我是父组件</h2>
    <ChildComponent @custom-event="handleCustomEvent" />
    <p>收到子组件发送的消息：{{ message }}</p>
  </div>
</template>

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

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

<!-- ChildComponent.vue -->
<template>
  <div>
    <h3>我是子组件</h3>
    <button @click="sendMessage">点击发送消息给父组件</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('custom-event', 'Hello，父组件！'); // 发射自定义事件
    },
  },
};
</script>

在上面的示例中，当点击子组件中的按钮时，子组件会发射一个名为custom-event的事件，并携带着一个字符串数据。父组件通过在模板中使用@custom-event来监听这个事件，并在方法中接收到子组件发送的数据赋值给message变量，然后在模板中动态展示。

Vue.js 3中的事件中续传递

有时候，我们希望子组件向上传递事件给父组件的父组件。在Vue.js 3中，我们可以使用$attrs和$listeners来实现这一功能。

首先，让我们更新上面的示例，将子组件的模板改为一个更复杂的结构，其中嵌套了一个子子组件，并且将子组件的emit事件改为传递给父组件的emit事件。

<!-- ParentComponent.vue -->
<template>
  <div>
    <h2>我是父组件</h2>
    <ChildComponent @custom-event="handleCustomEvent" />
    <p>收到子组件发送的消息：{{ message }}</p>
  </div>
</template>

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

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

<!-- ChildComponent.vue -->
<template>
  <div>
    <h3>我是子组件</h3>
    <p>点击子子组件触发的消息：{{ childMessage }}</p>
    <ChildChildComponent @custom-event="sendMessage" />
  </div>
</template>

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

export default {
  components: {
    ChildChildComponent,
  },
  data() {
    return {
      childMessage: '',
    };
  },
  methods: {
    sendMessage(data) {
      this.childMessage = data;
      this.$emit('custom-event', data); // 发射自定义事件
    },
  },
};
</script>

<!-- ChildChildComponent.vue -->
<template>
  <div>
    <h4>我是子子组件</h4>
    <button @click="sendMessage">点击发送消息给子组件</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('custom-event', 'Hello，父组件的父组件！'); // 发射自定义事件
    },
  },
};
</script>

在上述示例中，当子子组件的按钮被点击时，子子组件会向上发射一个名为custom-event的事件，并携带着一个字符串数据。子组件接收到这个事件后，不仅将数据赋值给childMessage，还通过$emit方法向上发射一个同名事件，并将数据传递给父组件。父组件在接收到这个事件后，将数据赋值给message。

这样，子子组件就通过子组件向上传递了事件给父组件。

Vue.js 3中的跨多级组件事件传递

有时候，我们可能需要通过多层嵌套的组件来传递事件。在Vue.js 3中，我们可以使用$emit方法与$listeners结合起来实现这个目标。

让我们继续更新上面的示例，将子组件改为只接收事件并向上传递事件，并将子子组件改为只发送事件。

<!-- ParentComponent.vue -->
<template>
  <div>
    <h2>我是父组件</h2>
    <ChildComponent : $listeners="$ listeners" />
    <p>收到子组件发送的消息：{{ message }}</p>
  </div>
</template>

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

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

<!-- ChildComponent.vue -->
<template>
  <div>
    <h3>我是子组件</h3>
    <p>点击子子组件触发的消息：{{ childMessage }}</p>
    <ChildChildComponent v-bind="$attrs" />
  </div>
</template>

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

export default {
  components: {
    ChildChildComponent,
  },
  data() {
    return {
      childMessage: '',
    };
  },
  methods: {
    sendMessage(data) {
      this.childMessage = data;
    },
  },
};
</script>

<!-- ChildChildComponent.vue -->
<template>
  <div>
    <h4>我是子子组件</h4>
    <button @click="sendMessage">点击发送消息给子组件</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('custom-event', 'Hello，父组件！'); // 发射自定义事件
    },
  },
};
</script>

在这个示例中，父组件在传递给子组件时将所有的$listeners传递给子组件。子组件接收到这些监听器后，可以通过this.$emit方法将事件传递给子子组件。子子组件在接收到这个事件后，通过this.$emit方法再将事件传递给父组件。

通过以上的代码更新，我们实现了从子子组件到子组件再到父组件的事件传递。