24 Vue 中的父子组件传值

在 Vue 的组件化开发中，组件之间的通信是一个非常重要的话题。上一章我们学习了组件的生命周期，了解了组件的创建、更新和销毁过程。今天，我们将重点讨论父子组件之间的传值，掌握如何在 Vue 中高效地实现这一功能。

1. 组件之间的关系

在 Vue 中，组件之间的关系主要分为两类：父组件和子组件。父组件（Parent Component）通常用来包裹子组件（Child Component），并且可以通过 props 向子组件传递数据。而子组件也可以通过触发事件的方式，向父组件传递数据。

2. 使用 props 传值

2.1 props 的定义和绑定

props 是父组件向子组件传递数据的方式。在定义子组件时，我们需要声明 props，在父组件中使用子组件时，使用属性的方式进行数据的传递。

<!-- Parent.vue -->
<template>
  <div>
    <h1>父组件</h1>
    <Child :message="parentMessage" />
  </div>
</template>

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

export default {
  components: {
    Child,
  },
  data() {
    return {
      parentMessage: 'Hello from Parent!',
    };
  },
};
</script>

<!-- Child.vue -->
<template>
  <div>
    <h2>子组件</h2>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true,
    },
  },
};
</script>

在上面的例子中，Parent.vue 作为父组件，通过 message 属性将数据传递给子组件 Child.vue。子组件通过 props 来接收和使用这个数据。

2.2 props 的类型校验

在使用 props 时，可以通过设置 type 和 required 来进行类型校验和必要性校验。在上个例子中，我们声明了 message 为必须的字符串类型。

3. 传递复杂数据

除了基础的数据类型，我们还可以使用 props 传递更复杂的数据结构，比如对象和数组：

<!-- Parent.vue -->
<template>
  <div>
    <h1>父组件</h1>
    <Child :info="parentInfo" />
  </div>
</template>

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

export default {
  components: {
    Child,
  },
  data() {
    return {
      parentInfo: {
        title: 'Hello from Parent!',
        description: 'This is a parent component description.',
      },
    };
  },
};
</script>

<!-- Child.vue -->
<template>
  <div>
    <h2>子组件</h2>
    <h3>{{ info.title }}</h3>
    <p>{{ info.description }}</p>
  </div>
</template>

<script>
export default {
  props: {
    info: {
      type: Object,
      required: true,
    },
  },
};
</script>

在这个例子中，父组件传递了一个对象 parentInfo 给子组件，子组件则展示了这个对象的内容。通过 props，实现了数据的灵活传递。

4. 通过事件向父组件传递数据

虽然 props 允许父组件向子组件传递数据，但有时子组件需要向父组件发送数据。为此，我们使用 自定义事件。这一点将在后续的章节中详细讨论，但在这里，我们简单演示一下如何通过 $emit 方法传递数据。

<!-- Child.vue -->
<template>
  <div>
    <h2>子组件</h2>
    <button @click="sendMessage">发送消息给父组件</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message-sent', 'Hello Parent! This is a message from Child.');
    },
  },
};
</script>

<!-- Parent.vue -->
<template>
  <div>
    <h1>父组件</h1>
    <Child @message-sent="handleMessage" />
  </div>
</template>

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

export default {
  components: {
    Child,
  },
  methods: {
    handleMessage(msg) {
      console.log(msg); // Output: Hello Parent! This is a message from Child.
    },
  },
};
</script>

在这个示例中，子组件 Child.vue 通过按钮点击事件触发自定义事件 message-sent，向父组件发送消息。父组件则通过 @message-sent 监听这个事件，并在 handleMessage 方法中处理。

5. 小结

在本章中，我们学习了如何在 Vue 中实现父子组件之间的通信，主要通过 props 来实现从父组件向子组件传值，以及通过 $emit 方法来向父组件发送数据。这些知识将为后续的自定义事件使用打下良好的基础。

下章将进一步探索 Vue 中的自定义事件和更多的组件间通信方式，敬请期待！