vue2.0 prop的使用

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_24147051/article/details/84100399

个人觉得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
      }
    }