Vue中props配置：

官方文档：组件实例的作用域是孤立的。这意味着不能（也不应该）在子组件的模板内直接引用父组件的数据。父组件的数据需要通过prop才能下发到子组件中。

也就是props是子组件访问父组件数据的唯一接口。

功能：让组件接受外部传过来的数据

1. 传递数据：

   <Demo name = "xxx"/>

2. 接收数据：

   • 第一种方式（只接收）：

     prop:['name']

   • 第二种方式（限制类型）:

     props:{
       name:Number
     }

   • 第三种方式（限制类型、限制必要性、指定默认值）：

     props:{
       name:{
         type:String, //类型
         require:true, //必要性
         default:'老王' //默认值
      }
     }

备注：props是只读的，Vue底层会检测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容data中一份，然后去修改data中的数据。

单项数据流：

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。

额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

这里有两种常见的试图变更一个 prop 的情形：

1. 这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。在这种情况下，最好定义一个本地的 data property 并将这个 prop 用作其初始值：

   props: ['initialCounter'],
   data: function () {
     return {
       counter: this.initialCounter
     }
   }

2. 这个 prop 以一种原始的值传入且需要进行转换。在这种情况下，最好使用这个 prop 的值来定义一个计算属性：

   props: ['size'],
   computed: {
     normalizedSize: function () {
       return this.size.trim().toLowerCase()
     }
   }