Prop传递数据

作者: xlayzheng | 来源:发表于2018-01-10 12:08 被阅读61次

Vue-Prop
Prop传递数据
5-prop-types 数据验证
vue 父子组件通讯
vue组件通信（父子）
一句话VUE
vue 组件通信
Vue | 组件间通信
React prop和state
Vue.js组件二之prop

名称书写规范

HTML 特性是不区分大小写的。所以，camelCase (驼峰式命名) 的 Prop 需要转换为相对应的 kebab-case (短横线分隔式命名)：

组件myHeader中配置：
props: ['myMessage']

调用时：
<my-header my-message='hello!'></my-header>

动态绑定prop

使用v-bind动态的将Prop绑定到父组件的数据。每当父组件的数据变化时，该变化也会传导给子组件。
如果你想把一个对象的所有属性作为 Prop 进行传递，可以使用不带任何参数的 v-bind (即用 v-bind 而不是 v-bind:prop-name)。例如，已知一个 todo 对象：

todo: {
  text: 'Learn Vue',
  isComplete: false
}
---------------------绑定------------------
<todo-item v-bind="todo"></todo-item>
--------------------等价于-----------------
<todo-item
  v-bind:text="todo.text"
  v-bind:is-complete="todo.isComplete"
></todo-item>

单向数据流

每次父组件更新时，子组件的所有 Prop 都会更新为最新值。这意味着你不应该在子组件内部改变 Prop。
如果你想：
- Prop 作为初始值传入后，子组件想把它当作局部数据来用；
- Prop 作为原始数据传入，由子组件处理成其它数据输出;
正确的应对方式：

-----------1.定义一个局部变量，并用 prop 的值初始化它：
props: ['initialCounter'],
data: function () {                     //将initialCounter复制给当前组件的局部变量counter
  return { counter: this.initialCounter }
}

-----------2.定义一个计算属性，处理 prop 的值并返回：
props: ['size'],
computed: {                             
  normalizedSize: function () {          //将size处理最后返回normalizedSize
    return this.size.trim().toLowerCase()
  }
}

Prop验证

给你期望的Prop规定类型、默认值、是否必须、验证函数...
type default required validator

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 value > 10
      }
    }
  }