### 一、父子组件介绍  ### 二、父组件给子组件传值 #### 1、父组件调用子组件的时候传值 ~~~ <template> <v-header :title="title"></v-header> </template> <script> import Header from './Header' export default { data() { return { title: "首页组件title" } }, components: { "v-header": Header } } </script> ~~~ #### 2、子组件接收父组件传值 ~~~ <template> <header>{{title}}</header> </template> <script> export default { props: ["title"] } </script> ~~~ ### 三、Props验证 我们可以为组件的 prop 指定验证要求，例如你知道的这些类型。如果有一个需求没有被满足，则 Vue 会在浏览器控制台中警告你。这在开发一个会被别人用到的组件时尤其有帮助。 **props验证：** ~~~ props: { // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证) propA: Number, // 多个可能的类型 propB: [String, Number], // 必填的字符串 propC: { type: String, required: true }, // 带有默认值的数字 propD: { type: Number, default: 100 }, // 带有默认值的对象 propE: { type: Object, // 对象或数组默认值必须从一个工厂函数获取 default: function() { return { message: 'hello' } } }, // 自定义验证函数 propF: { validator: function(value) { // 这个值必须匹配下列字符串中的一个 return ['success', 'warning', 'danger'].indexOf(value) !== -1 } }, // 具有默认值的函数 propG: { type: Function, // 与对象或数组默认值不同，这不是一个工厂函数 —— 这是一个用作默认值的函数 default: function() { return 'Default function' } } ~~~ ### 四、单向数据流 所有的 prop 都使得其父子 prop 之间形成了一个**单向下行绑定**：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。 另外，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你**不**应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。