在 Vue.js 中，可以通过 props 来向子组件传递参数。以下是一个基本的例子来说明如何做到这一点。

父组件

<template>
  <div>
    <h1>父组件</h1>
    <!-- 向子组件传递参数 -->
    <ChildComponent :message="parentMessage" :count="42" />
  </div>
</template>

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

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

子组件

<template>
  <div>
    <h2>子组件</h2>
    <p>Message: {{ message }}</p>
    <p>Count: {{ count }}</p>
  </div>
</template>

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

在这个例子中：

1. 父组件中定义了一个 parentMessage 数据属性，并将其值 'Hello from Parent' 通过 message prop 传递给子组件。
2. 同时，父组件还将一个数字 42 通过 count prop 传递给子组件。
3. 子组件定义了 props，接收从父组件传递过来的 message 和 count。

详细步骤

1. 在父组件中引用子组件：
   父组件通过 import 导入子组件，并在 components 选项中注册。

2. 在父组件的模板中使用子组件标签：
   使用子组件标签 <ChildComponent />，并通过 : 语法传递参数。

3. 在子组件中定义 props：
   子组件通过 props 选项声明需要接收的参数，指定参数的类型和是否必需。

注意事项

• 确保子组件接收的 props 在父组件中已定义并传递。
• 可以为 props 定义默认值，使用 default 选项。
• Prop 校验可以帮助捕获传递错误的数据类型。

通过这种方式，你可以在 Vue.js 中实现父子组件之间的数据传递，使得组件之间的通信更加清晰和结构化。