parent
类型:Vue instance
详细:
指定已创建的实例之父实例,在两者之间建立父子关系。子实例可以用 this.$parent 访问父实例,子实例被推入父实例的 $children 数组中。
节制地使用 $parent 和 $children - 它们的主要目的是作为访问组件的应急方法。更推荐用 props 和 events 实现父子组件通信
mixins
类型:Array
详细:
mixins 选项接收一个混入对象的数组。这些混入对象可以像正常的实例对象一样包含实例选项,这些选项将会被合并到最终的选项中,使用的是和 Vue.extend() 一样的选项合并逻辑。也就是说,如果你的混入包含一个 created 钩子,而创建组件本身也有一个,那么两个函数都会被调用。
Mixin 钩子按照传入顺序依次调用,并在调用组件自身的钩子之前被调用。
示例:
varmixin = {created:function(){console.log(1) }}varvm =newVue({created:function(){console.log(2) },mixins: [mixin]})// => 1// => 2
参考:混入
extends
类型:Object | Function
详细:
允许声明扩展另一个组件(可以是一个简单的选项对象或构造函数),而无需使用 Vue.extend。这主要是为了便于扩展单文件组件。
这和 mixins 类似。
示例:
varCompA = { ... }// 在没有调用 `Vue.extend` 时候继承 CompAvarCompB = {extends: CompA, ...}
provide / inject
2.2.0 新增
类型:
provide:Object | () => Object
inject:Array
详细:
provide 和 inject 主要在开发高阶插件/组件库时使用。并不推荐用于普通应用程序代码中。
这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。如果你熟悉 React,这与 React 的上下文特性很相似。
provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。在该对象中你可以使用 ES2015 Symbols 作为 key,但是只在原生支持 Symbol 和 Reflect.ownKeys的环境下可工作。
inject 选项应该是:
一个字符串数组,或
一个对象,对象的 key 是本地的绑定名,value 是:
在可用的注入内容中搜索用的 key (字符串或 Symbol),或
一个对象,该对象的:
from 属性是在可用的注入内容中搜索用的 key (字符串或 Symbol)
default 属性是降级情况下使用的 value
提示:provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的。
示例:
// 父级组件提供 'foo'varProvider = {provide: {foo:'bar'},// ...}// 子组件注入 'foo'varChild = {inject: ['foo'], created () {console.log(this.foo)// => "bar"}// ...}
利用 ES2015 Symbols、函数 provide 和对象 inject:
consts =Symbol()constProvider = { provide () {return{ [s]:'foo'} }}constChild = {inject: { s },// ...}
接下来 2 个例子只工作在 Vue 2.2.1 或更高版本。低于这个版本时,注入的值会在 props 和 data 初始化之后得到。
使用一个注入的值作为一个属性的默认值:
constChild = {inject: ['foo'],props: {bar: {default() {returnthis.foo } } }}
使用一个注入的值作为数据入口:
constChild = {inject: ['foo'], data () {return{bar:this.foo } }}
在 2.5.0+ 的注入可以通过设置默认值使其变成可选项:
constChild = {inject: {foo: {default:'foo'} }}
如果它需要从一个不同名字的属性注入,则使用 from 来表示其源属性:
constChild = {inject: {foo: {from:'bar',default:'foo'} }}
与 prop 的默认值类似,你需要对非原始值使用一个工厂方法:
constChild = {inject: {foo: {from:'bar',default:()=>[1,2,3] } }}