Vue中的prop属性

用来接收父组件传给子组件的数据，可以在组件上注册一些自定义特性，当一个值传递给一个prop特性的时候，它就变成那个组件实例的一个属性。

用法：

// 父组件
<child message="this is message"></child>

// 在子组件中定义
Vue.component('child', {
 ...
 props: ['message']
 ...
})

假设此时的 message 的命名被 myMessage 时，父组件应该写为：
<child my-message="this is message"></child>
因为HTML中的名大小写不敏感，所以浏览器会把所有大写字符解释为小写字符。

传递静态或动态prop

静态传入

// 父组件
<child message="this is message"></child>

// 在子组件中定义
Vue.component('child', {
 ...
 props: ['message']
 ...
})

动态传入

<!-- 通过v-bind动态赋值 -->

// 父组件
<child v-bind:message="msg"></child>

// 在子组件中定义
Vue.component('child', {
 ...
 props: ['message']
 ...
})

单项数据流

• 是单向绑定的，当父组件的属性变化时，将传导给子组件，但是不会反过来。
• 每次父组件发生更新时，子组件中所有的Prop都将刷新为最新的值。这意味着你不应该在子组件内部改变Prop，如果你这样做了，Vue会在控制台抛出一个警告。

1、如果子组件需要操作prop中的值，需要将prop中的值赋值给本地定义属性：

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

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

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

prop验证

我们可以为组件的 prop 指定验证要求。如果有一个需求没有被满足，则会出错。

Vue.component('my-component', {
  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
      }
    }
  }
})