vue选项组合

parent

• 类型: Vue instance
• 详细:
  指定已创建的实例之父实例, 在两者之间建立父子关系. 子实例可以用 this.$parent 访问父实例. 子实例被推入父实例的 $children 数组中

mixins

• 类型: Array<Object>

• 详细:
  mixins 选项接受一个混入对象的数组, 这些混入对象可以像正常的实例对象一样包含实例选项. 这些选项将会被合并到最终的选项中, 使用的是和 Vue.extend() 一样的选项合并逻辑. 也就是说, 如果你的混入包含一个 created 钩子, 而创建组件本身也有一个, name 两个函数都会被调用
  Mixin 钩子按照传入的顺序依次调用, 并在调用组件自身的钩子之前被调用

• 示例

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

extends

• 类型: Object | Function

• 详细:
  允许声明扩展另一个组件(可以是一个简单的选项对象或构造函数), 而无需使用 Vue.extend
  这主要是为了便于扩展单文件组件
  这和 mixin 类型

• 示例

  var ComA = { ... }
  
  // 在没有调用 `Vue.extend` 时候继承 ComA
  var ComB = {
    extends: ComA
    ...
  }

provide / inject

• 类型:

  • provide: Object | () => Object
  • inject: Array<string> | { [key: string]: string | Symbol | Object}

• 详细:
  这对选项需要一起使用, 以允许一个祖先组件向其所有子孙后台注入一个依赖, 不论组件层次有多深, 并在起上下游关系成立的时间里始终生效.
  provide 选项应该是一个对象或返回一个对象的函数, 该对象包含可注入其子孙的属性. 在该对象中你可以使用 ES2015 Symbols, 但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作。
  inject 选项应该是:

  • 一个字符串数组, 或
  • 一个对象, 对象的 key 是本地的绑定名, value 是:
    • 在可用的注入内容中搜索用的 key,或
    • 一个对象, 该对象的:
      • from 属性实在可用的注入内容中搜索用的 key
      • default 属性是降级情况下使用的 value

• 示例

  // 父组件提供的 foo
  var Provider = {
    provide: {
      foo: 'bar'
    }
    // ...
  }
  
  // 子组件注入 foo
  var Chil = {
    inject: ['foo'],
    created: function() {
      console.log(this.foo) // => bar
    }
  }

  利用 Symbols、函数、provide 和对象 inject

  const s = Symbol()
  
  const Provider = {
    provide() {
      return {
        [s]: 'foo'
      }
    }
  }
  
  const Child = {
    inject: { s }
  }

  使用一个注入的值作为一个属性的默认值

  const Child = {
    inject: ['foo'],
    props: {
      bar: {
        default() {
          return this.foo
        }
      }
    }
  }

  使用一个注入的值作为数据入口

  // 2.2.1
  const Child = {
    inject: ['foo'],
    data() {
      return {
        bar: this.foo
      }
    }
  }
  
  // 2.5
  const Child = {
    inject: {
      foo: { default: 'foo' }
    }
  }

  如果需要从一个不同名字的属性注入, 则使用 from 来表示其源属性:

  const Child = {
    inject: {
      foo: {
        from: 'bar',
        default: 'foo'
      }
    }
  }

  与 prop 的默认值类型, 你需要对非原始值使用一个工厂方法

  const Child = {
    inject: {
      foo: {
        from: 'bar',
        default: () => [1, 2, 3]
      }
    }
  }