vue-选项 / 组合

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 | { [key: string]: string | Symbol | Object }

详细

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]    }  }}

你可能感兴趣的:(vue-选项 / 组合)