第二阶段：Vue 组件化开发（第 19天）

Vue 组件间通信：子组件向父组件传值（$emit）

在 Vue.js 中，组件间通信是构建应用的关键部分。子组件向父组件传值通常通过 $emit 方法实现，这是一种高效的事件驱动方式。下面我将逐步解释核心知识点、提供案例代码，并总结要点，帮助你掌握这一技术。

核心知识点

1. $emit 的作用 ：

   子组件通过 $emit 触发一个自定义事件，将数据传递给父组件。这允许子组件主动通知父组件某些状态变化或用户输入。

2. 自定义事件的触发 ：

   在子组件中，使用 this.$emit('eventName', data) 来触发事件。其中：

   • eventName 是自定义事件名（例如 'update-content'），需在父组件中监听。
   • data 是传递的数据（可以是字符串、对象等）。

3. 自定义事件的监听 ：

   父组件在使用子组件时，通过 v-on 指令（或简写 @）监听事件。例如：<ChildComponent @eventName="handleEvent" />。

4. 事件处理 ：

   父组件定义事件处理函数（如 handleEvent），该函数接收子组件传递的数据，并更新父组件的状态（如 data 属性）。

案例代码

以下是一个完整示例，实现子组件向父组件传递用户输入的内容，父组件展示该内容。代码使用 Vue 3 的选项式 API。

子组件（ChildComponent.vue）：

<template>
  <div>
    <input type="text" v-model="inputValue" placeholder="输入内容">
    <button @click="sendToParent">提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    sendToParent() {
      // 触发自定义事件 'update-content'，并传递 inputValue
      this.$emit('update-content', this.inputValue);
      this.inputValue = ''; // 清空输入框
    }
  }
}
</script>

父组件（ParentComponent.vue）：

<template>
  <div>
    <h2>父组件接收的内容：{{ receivedContent }}</h2>
    <ChildComponent @update-content="handleContentUpdate" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      receivedContent: ''
    }
  },
  methods: {
    handleContentUpdate(data) {
      // 接收子组件传递的数据，更新状态
      this.receivedContent = data;
    }
  }
}
</script>

说明：

• 子组件定义了一个输入框和按钮。用户输入内容后，点击按钮触发 sendToParent 方法，通过 $emit 发送事件和数据。
• 父组件监听 @update-content 事件，调用 handleContentUpdate 方法接收数据，并更新 receivedContent 状态。
• 运行应用时，用户在子组件输入内容并提交，父组件会实时显示该内容。

总结要点

1. 掌握传值流程：

   • 子组件使用 this.$emit('eventName', data) 触发事件。
   • 父组件通过 v-on 监听事件，并定义处理函数接收数据。
   • 这种模式实现了从子到父的单向数据流，确保组件间解耦。

2. 理解原理：

   • $emit 基于 Vue 的事件系统，允许子组件"发射"事件，父组件"监听"并响应。
   • 这种方式实现了父子组件间的双向交互，适用于用户输入、状态更新等场景。
   • 在实际开发中，确保事件名唯一且语义清晰，避免冲突。

通过这个案例，你可以练习在项目中应用 $emit，例如表单提交、用户反馈等。Vue 的官方文档提供了更多高级用法，建议结合实践加深理解。