如何在 Vue 组件内部正确定义 prop?

在 Vue.js 中，正确定义 prop (即属性) 有助于保持组件间的通信清晰和可预测。以下是定义 prop 的步骤：

1. **在父组件中传递 prop**：首先，在父组件的模板或 export default 对象中定义你想传递给子组件的 prop。例如：

<!-- 父组件 -->
<template>
  <child-component :my-prop="parentValue" />
</template>

<script>
export default {
  data() {
    return {
      parentValue: "这是父组件的值",
    };
  },
};
</script>

2. **在子组件中定义 prop**：在子组件的 `props` 部分，明确地接受这个 prop，并指定其类型、默认值、可选以及任何验证规则。比如：

// 子组件 (Child.vue)
<script setup lang="ts">
import { PropType } from 'vue';

const MyPropType = {
  type: String,
  required: false, // 可选，默认值为 undefined
  default: "默认值",
  validator: (value) => value.length > 0, // 自定义验证
};

const myProp = defineProp("my-prop", MyPropType);
</script>

这里的 `defineProp` 是 TypeScript 版本的 Vue，如果是 ES6，则使用 `defineProps`。

3. **在组件内使用 prop**：一旦 prop 被接收，就可以像处理本地数据一样在组件内部使用它了。避免直接修改 prop 的值，因为这是单向数据流原则的一部分。

记得，`v-bind` 或简写 `:` 可用于绑定 prop，例如 `<child-component v-bind:my-prop="parentValue"></child-component>`。