vue2.0 prop的使用

个人觉得Prop的使用需要注意四点：

---

第一点： 使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名

HTML

Vue.component('blog-post', {
  // 在 JavaScript 中是 camelCase 的
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})

JS

<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>

第二点：传递静态或动态 Prop

静态： 即表示 字符串，整数等不会改变的值（不需要绑定）

<blog-post title="My journey with Vue"></blog-post>

动态： 即表示 数组，对象等会改变的值（需要绑定）

    <!-- 动态赋予一个变量的值 -->
    <blog-post v-bind:title="post.title"></blog-post>
    
    <!-- 动态赋予一个复杂表达式的值 -->
    <blog-post v-bind:title="post.title + ' by ' + post.author.name"></blog-post>

---

第三点：单项数据流

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

1. 在子组件中任何生命周期都无法获得 prop的值
2. 在子组件任何methods里面都无法获得 prop的值
3. 只可以在watch里面对prop进行监听，和相关处理

---

第四点：Prop 可以进行数据验证

我们可以为组件的 prop 指定验证要求，例如你知道的这些类型。如果有一个需求没有被满足，则 Vue 会在浏览器控制台中警告你。

     props: {
         // 必填的字符串
        propC: {
          type: String,
          required: true
        },
        
          // 带有默认值的数字
        propD: {
          type: Number,
          default: 100
        },
        
        // 多个可能的类型
        BB: [String, Number],
        
        // 没有默认值的对象
        propE: {
          type: Object,
          // 对象或数组默认值必须从一个工厂函数获取
          default: （）=>（{}）
        },
        
        // 带有默认值的对象
        propE: {
          type: Object,
          // 对象或数组默认值必须从一个工厂函数获取
          default: function () {
            return { message: 'hello' }
          }
        },
        
        // 自定义验证函数
        propF: {
          validator: function (value) {
            // 这个值必须匹配下列字符串中的一个
            return ['success', 'warning', 'danger'].indexOf(value) !== -1
          }
        }