Vue.js 中,父组件向子组件传递数据的主要方式是通过 props。具体步骤如下:

在父组件中定义要传递的数据:

<!-- 父组件模板 -->
<template>
  <child-component :message="parentMessage"></child-component>
</template>

<script>
export default {
  data() {
    return {
      parentMessage: 'Hello from parent'
    }
  }
}
</script>

在子组件中定义 props 并接收数据:

<!-- 子组件模板 -->
<template>
  <div>{{ message }}</div>
</template>

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

在这个例子中,父组件将 parentMessage 数据传递给子组件的 message prop。子组件通过 props 选项接收并使用这个数据。

需要注意的是:

子组件只能读取 prop,不能直接修改 prop 的值。如果需要修改 prop 的值,可以使用计算属性或者在子组件中声明一个本地数据,并根据 prop 的值来更新这个本地数据。

父组件可以传递任何类型的数据给子组件,包括基本数据类型、对象、数组等。

子组件可以通过定义 props 的类型和是否必填等属性来限制父组件传递的数据。

总之,父子组件之间的数据传递是 Vue.js 中非常常见和重要的概念。掌握好这个概念对于理解和使用 Vue.js 至关重要。