父组件向子组件传递数据

在 Vue.js 中，父组件向子组件传递数据可以通过 props 实现。props 是父组件向子组件传递数据的方式之一，可以让父组件传递数据给子组件，并且在子组件中使用这些数据。

下面是一个简单的示例，演示了父组件向子组件传递数据的过程：

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

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    }
  }
}
</script>
htmlCopy Code<!-- ChildComponent.vue -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

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

在这个示例中，父组件 ParentComponent 向子组件 ChildComponent 传递了一个名为 message 的数据。在子组件中，我们声明了一个名为 message 的 prop，并指定了它的类型和是否是必需的。然后在子组件模板中，我们使用了这个 prop 来显示接收到的消息。

通过这样的方式，父组件就可以向子组件传递数据，并且子组件可以根据传递过来的数据来进行相应的操作。props 是 Vue.js 中非常常用的特性，可以让组件之间更好地进行数据通信。