vue中组件的props属性

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ description }}</p>
  </div>
</template>

<script>
export default {
  props: {
    // 定义一个名为 title 的 prop，类型为字符串，必须传递
    title: {
      type: String,
      required: true
    },
    // 定义一个名为 description 的 prop，类型为字符串，默认值为空字符串
    description: {
      type: String,
      default: ''
    }
  }
}
</script>

<style scoped>
/* 这里可以添加一些样式 */
</style>

解释说明：

1. props 属性：在 Vue 组件中，props 是用于接收父组件传递的数据的。它是一个对象，每个属性定义了一个 prop 的名称、类型和一些其他选项。

2. title 和 description：

   • title 是一个必需的字符串类型的 prop，表示标题内容。
   • description 是一个可选的字符串类型的 prop，默认值为空字符串。

3. 模板部分 (<template>)：

   • 使用了两个插值表达式 {{ title }} 和 {{ description }} 来显示从父组件传递过来的数据。

4. 脚本部分 (<script>)：

   • 在 props 中定义了 title 和 description，并指定了它们的类型和是否必需。

5. 样式部分 (<style scoped>)：

   • 可以在这里为组件添加样式，scoped 关键字确保这些样式只应用于当前组件。