篇一、组件通信（父级传值给子组件 props ）

props 用法（props写在子组件中）

父组件

子组件

---

                         ****--- 番外篇 ---****

1、传递静态 Prop
例：<blog-post title="My journey with Vue"></blog-post>

2、传递动态 Prop（可以通过 v-bind 动态赋值）
例：<blog-post :title="post.title + ' by ' + post.author.name"></blog-post>

---

1、 prop 用来传递一个初始值；

• 如果子组件接下来希望将其作为一个本地的 prop 数据来使用。在这种情况下，最好定义一个本地的 data 属性并将这个 prop 用作其初始值：

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

2、 prop 以一种原始的值传入且需要进行转换。

• 在这种情况下，最好使用这个 prop 的值来定义一个计算属性：

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

---

1、props验证

props: {
  // 基础的类型检查 (`null` 匹配任何类型)
  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
    }
  }
}