如何在父组件中向子组件传递数据？-JavaScript中文网-JavaScript教程资源分享门户

推荐答案

在 uni-app 中，父组件向子组件传递数据可以通过 props 实现。具体步骤如下：

在子组件中定义 props：在子组件的 script 部分，使用 props 属性来声明接收的数据。
```
export default {
  props: {
    message: {
      type: String,
      default: '默认值'
    }
  }
}
```

在父组件中使用子组件并传递数据：在父组件的模板中，使用子组件并通过 v-bind 或简写 : 来传递数据。

// www.javascriptcn.com code example
<template>
  <child-component :message="parentMessage"></child-component>
</template>

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

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

本题详细解读

1. `props` 的作用

props 是 Vue.js 中用于父组件向子组件传递数据的一种机制。通过 props，父组件可以将数据传递给子组件，子组件接收并使用这些数据。

2. `props` 的定义

在子组件中，props 是一个数组或对象，用于声明接收的数据。每个 prop 可以指定类型、默认值等。

类型：可以指定 String、Number、Boolean、Array、Object 等类型。
默认值：如果父组件没有传递该 prop，子组件将使用默认值。

3. 父组件传递数据

在父组件中，通过 v-bind 或简写 : 将数据绑定到子组件的 props 上。父组件的数据可以是静态的，也可以是动态的（如 data 中的变量）。

4. 示例代码

以下是一个完整的示例，展示了如何在父组件中向子组件传递数据：

子组件 (ChildComponent.vue):

// www.javascriptcn.com code example
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      default: '默认值'
    }
  }
}
</script>

父组件 (ParentComponent.vue):

// www.javascriptcn.com code example
<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

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

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

在这个示例中，父组件通过 :message="parentMessage" 将 parentMessage 数据传递给子组件，子组件通过 props 接收并显示该数据。

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