Vue Props 简明教程：组件间数据传递的利器

Vue 中的 props 是一种组件之间数据传递的方式，类似于传递函数的参数。一个组件可以通过 props 向其它组件传递数据，这些数据可以是任何类型的值，包括字符串、数字、数组、对象等等。

例如，我们有一个名为 'Greeting' 的组件，可以像下面这样定义 props 传递数据：

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

<script>
export default {
  name: 'Greeting',
  props: {
    message: String
  }
}
</script>

在这个组件中，我们定义了一个 props 属性，它是一个对象，包含一个名为 'message' 的属性。这个属性的类型为字符串，表示我们要传递的数据类型是字符串。

然后，我们可以在另一个组件中使用这个 Greeting 组件，并通过 props 传递数据：

<template>
  <div>
    <Greeting message='Hello, Vue!' />
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    Greeting
  }
}
</script>

在这个组件中，我们使用了 Greeting 组件，并通过 props 将一个字符串数据 'Hello, Vue!' 传递给 Greeting 组件的 message 属性。这样，当 Greeting 组件被渲染时，它将显示 'Hello, Vue!' 这个消息。

这就是 Vue 中 props 的基本用法，它允许我们在组件之间传递数据，使得组件之间的通信变得更加方便和灵活。