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