Skip to content

选项/组合

parent

类型:Vue instance

指定已创建的实例之父实例,在两者之间建立父子关系。子实例可以用 this.$parent 访问父实例,子实例被推入父实例的 $children 数组中。

节制地使用 $parent 和 $children - 它们的主要目的是作为访问组件的应急方法。更推荐用 props 和 events 实现父子组件通信

mixin

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

Mixin 钩子按照传入顺序依次调用,并在调用组件自身的钩子之前被调用。

js
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。这主要是为了便于扩展单文件组件。

这和 mixins 类似,区别在于,组件自身的选项会比要扩展的源组件具有更高的优先级。

js
var CompA = {/**/}
// 在没有调用 Vue.extend 时继承 CompA
var CompB = {
  extends: CompA,
  // ...
}

provide/inject

provide:Object | () => Object inject:Array<string> |

provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。

这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。

provide选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。在该对象中你可使用 Symbols 作为key,但是只在原生 SymbolReflect.ownKeys 的环境下可工作。

inject选项应该是一个字符串数组或一个对象,该对象的key代表了本地绑定的名称,value为其key(字符串或Symbol)以在可用的注入中搜索

提示:provide和inject绑定并不是可响应的。这是刻意为之的。然而,如果你传入一个可监听的对象,那么其对象的属性还是可响应的。

js
var Provider = {
  provide: {
    foo: 'bar'
  }
}
var Child = {
  inject: ['foo'],
  created() {
    console.log(this.foo) // 'bar'
  }
}

// 利用 Symbols 函数provide 和对象inject
const s = Symbol()
const Provide = {
  provide() {
    return {
      [s]: 'foo'
    }
  }
}
const Child = {
  inject: {s}
}

// 使用一个注入的值作为一个属性的默认值:
const Child = {
  inject: ['foo'],
  props: {
    bar: {
      default() {
        return this.foo
      }
    }
  }
}

// 使用一个注入的值作为数据入口:
const Child = {
  inject: ['foo'],
  data() {
    return {
      bar: this.foo
    }
  }
}

共 20 个模块,1301 篇 Markdown 文档。