Vue 页面之使用props传递数据

在 Vue 中，我们可以使用 props 来从父组件向子组件传递数据。在子组件中，这个数据会被当作子组件的属性来处理。

在父组件中使用子组件时，可以向子组件传递数据。例如，假设我们有一个父组件 Parent 和一个子组件 Child，我们想传递一个字符串 "Hello World" 给子组件：

<template>
  <div>
    <child-component message="Hello World"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  }
}
</script>

在子组件 ChildComponent 中，我们需要定义一个 props 对象，用来接收来自父组件的数据：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: String
  }
}
</script>

在上面的代码中，我们定义了一个 props 对象，它包含一个名为 message 的属性。我们还指定了这个属性的类型为 String。

现在，当我们从父组件传递一个字符串给子组件时，子组件就可以使用这个字符串来显示消息了。在上面的代码中，我们使用了插值表达式 {{ message }} 来显示这个消息。

注意：使用 props 传递数据时，父组件中的数据是单向流动的。也就是说，父组件可以向子组件传递数据，但子组件不能直接修改父组件中的数据。如果子组件需要修改父组件中的数据，那么它应该通过触发一个事件来通知父组件。