Vue笔记（8） - props与mixins

https://cn.vuejs.org/v2/guide/components.html#Prop-%E9%AA%8C%E8%AF%81

（1）props验证

Vue.component('example', {
  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' }
      }
    },
    // 自定义验证函数。validator： 验证器
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }
})

（2）非prop属性

所谓非 prop 特性，就是指它可以直接传入组件，而不需要定义相应的 prop。

例如：

有两个问题：
①在子组件中无法使用这个num，因为props中压根没定义。
②num='1000'会被自动添加到 counter 的根元素上，打开控制台就可以看到：

image.png

而prop属性是不会显示出来的。非prop属性的使用场景不是很多。

（3）mixins

https://cn.vuejs.org/v2/api/#mixins

mixins 选项接受一个混入对象的数组。这些混入实例对象可以像正常的实例对象一样包含选项，他们将在 Vue.extend() 里最终选择使用相同的选项合并逻辑合并。举例：如果你的混入包含一个钩子而创建组件本身也有一个，两个函数将被调用。
Mixin 钩子按照传入顺序依次调用，并在调用组件自身的钩子之前被调用。

var mixin = {
  created: function () { console.log(1) }
}
var vm = new Vue({
  created: function () { console.log(2) },
  mixins: [mixin]
})

输出：
// => 1
// => 2

可以理解为对象的混合。就像原生js中的assign()

created混合后就相当于：

created: function() {
  console.log(1)
  console.log(2)
}

对于一些方法的js代码，我们当然是直接导入就用。但对于要写入组件中元数据（写在computed、created、mounted这些）的代码，就要用到mixins了，比如很多个组件的created中需要console.log(2)，那么另创建一个文件将created: function () { console.log(1) }代码写入，然后在其他组件中导入，导入后添加到mixins元数据即可。