Vue3 props 类型检查 输入验证 保证单项数据流

props 暴露的属性，和HTML标签的属性，使用方法相同，可以直接赋值，也可以通过v-bind动态绑定

指明props的类型

以对象形式列出 prop，属性名和值分别是 prop 名称和类型。
会进行类型检查

{
	props: {
		propA: String, // 可以为 8 种原生构造函数 Symbol（ES6） 也可以是自定义的构造函数
		···
	}
}

父级通过对象整体绑定 props

传入一个对象的所有 property

post: {
  id: 1,
  title: 'My Journey with Vue'
}

<blog-post v-bind="post"></blog-post>

等价于：

<blog-post v-bind:id="post.id" v-bind:title="post.title"></blog-post>

保证单向数据流

父到子 单向下行绑定 不应该在一个子组件内部改变 prop

当仅仅是需要得到父级提供初始值
可以定义一个 data 赋值这个初始值
当需要对传入的值进行转化时，可以使用计算属性，
总之就是不要直接修改props

prop 类型验证

使用一个带有验证需求的对象创建props
type类型、required必填、default默认值 、**validator()**验证方法（使用工厂函数）

• 仅限制类型可以简写 属性名: 类型
• 允许多个类型使用 数组囊括 [String, Number]
• 对象和方法的默认值要使用工厂函数

{
	props: {
		// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
		// 必填的字符串
		myName: {
		  type: String,
		  required: true,
		  default: "seaurchin486"
		},
		// 带有默认值的对象
		propObj: {
		  type: Object,
		  // 对象或数组默认值必须从一个工厂函数获取
		  default() {
		    return { message: 'Hello Vue!' }
		  }
		},
		// 具有默认值的函数
		propFun: {
		  type: Function,
		  // 与对象或数组默认值不同，这不是一个工厂函数 —— 这是一个用作默认值的函数
		  default() {
		    return 'Default function'
		  }
		},
		// 自定义验证函数
		propValidator: {
		  validator(value) {
		    // 这个值必须匹配下列字符串中的一个
		    return ['success', 'warning', 'danger'].includes(value)
		  }
		}
	}
}

prop 验证发生在一个组件实例创建之前，
所以实例的 property (如 data、computed 等) 在 default 或 validator 函数中是不可用的。

单向数据流

也就是说 prop 的值，应该是父级向子级的单项传递，自己不应该反过来修改 prop （Vue会打印警告）

子级可能需要修改的情景：

1. 通过父级提供初始值，子级在这个值基础上会涉及到一些修改，可以将 prop 赋值给 data，之后对data操作；
2. 父级传入的原始值，子级需要对齐加工使用，可以使用 计算属性 而不是直接修改 prop