vue父组件如何向子组件中传递数据

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

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: '这是来自父组件的消息'
    };
  }
};
</script>

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

<script>
export default {
  props: ['message']
};
</script>

解释说明

1. 父组件传递数据给子组件：在父组件中，通过 v-bind（简写为 :）将父组件的数据绑定到子组件的属性上。这里我们将 parentMessage 绑定到了子组件的 message 属性。

2. 子组件接收数据：在子组件中，通过 props 接收父组件传递过来的数据。props 是一个数组或对象，用于定义子组件可以接收的属性。在这个例子中，我们定义了 message 作为 props 的一个属性。

3. 使用传递的数据：在子组件的模板中，可以直接使用接收到的 props 数据。这里我们在子组件的 <p> 标签中显示了 message 的值。

4. 父子组件通信：这种方式是 Vue 中最常用的父子组件通信方式之一，适用于简单的单向数据流场景。