引言
测试基于vue初始化的脚手架,不加router等其他的,使用index.html,编辑的入口main.js,结合控制台和页面观察输出结果,学习选项的使用
组合配置选项
parent
类型:Vue instance
详细
指定已创建的实例之父实例,在两者之间建立父子关系。
子实例可以用 this.$parent 访问父实例,子实例被推入父实例的 $children 数组中。
节制地使用 $parent 和 $children - 它们的主要目的是作为访问组件的应急方法。
更推荐用 props 和 events 实现父子组件通信
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
Vue.config.productionTip = false
/* eslint-disable no-new */
var parent = new Vue({
el: '#parent',
template: `<div>
<button v-on:click="childrenMsg">点我呀</button>
<h1>Parent {{msg}}</h1>
</div>`,
methods:{
childrenMsg:function () {
this.$children[0].$data.msg++;
}
},
data: function () {
return {msg:0}
}
})
var children = new Vue({
el: '#children',
parent:parent,
template: `<div>
<button v-on:click="parentMsg">点我呀</button>
<h1>Children {{msg}}</h1>
</div>`,
methods:{
parentMsg:function () {
this.$parent.msg++;
}
},
data: function () {
return {msg:0}
}
})
mixins
类型:Array<Object>
详细:
mixins 选项接受一个混入对象的数组。这些混入实例对象可以像正常的实例对象一样包含选项,他们将在 Vue.extend() 里最终选择使用相同的选项合并逻辑合并。举例:如果你的混入包含一个钩子而创建组件本身也有一个,两个函数将被调用。
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。这主要是为了便于扩展单文件组件。
这和 mixins 类似,区别在于,组件自身的选项会比要扩展的源组件具有更高的优先级。
示例:
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
Vue.config.productionTip = false
/* eslint-disable no-new */
var CompA = {
template:'<div>template from CompA</div>',
beforeCreate:function () {
console.log('beforeCreate form CompA ')
},
created:function () {
console.log('created from CompA')
}
}
var CompB = {
extends:CompA,
template:'<div>template from CompB</div>',
beforeCreate:function () {
console.log('beforeCreate form CompB')
}
};
new Vue({
el:'#app',
components:{CompB},
template:'<CompB></CompB>'
});
事件钩子会触发,但是template优先选择子组件的
provide / inject
看了半天没理解这玩意,有空再补充
其它配置选项
name
类型:string
限制:只有作为组件选项时起作用。
详细:
允许组件模板递归地调用自身。注意,组件在全局用 Vue.component() 注册时,全局 ID 自动作为组件的 name。
指定 name 选项的另一个好处是便于调试。有名字的组件有更友好的警告信息。另外,当在有 vue-devtools,未命名组件将显示成 ,这很没有语义。通过提供 name 选项,可以获得更有语义信息的组件树。
delimiters
类型:Array
默认值:[“{{“, “}}”]
限制:这个选项只在完整构建版本中的浏览器内编译时可用。
详细:
改变纯文本插入分隔符。
示例:
new Vue({
delimiters: ['${', '}']
})
// 分隔符变成了 ES6 模板字符串的风格
functional
类型:boolean
详细:
使组件无状态 (没有 data ) 和无实例 (没有 this 上下文)。他们用一个简单的 render 函数返回虚拟节点使他们更容易渲染。
参考:函数式组件
model
类型:{ prop?: string, event?: string }
详细:
允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event,但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。
Example:
Vue.component('my-checkbox', {
model: {
prop: 'checked',
event: 'change'
},
props: {
// this allows using the `value` prop for a different purpose
value: String,
// use `checked` as the prop which take the place of `value`
checked: {
type: Number,
default: 0
}
},
// ...
})
<my-checkbox v-model="foo" value="some value"></my-checkbox>
上述代码相当于:
<my-checkbox
:checked="foo"
@change="val => { foo = val }"
value="some value">
</my-checkbox>
inheritAttrs
类型:boolean
默认值:true
详细:
默认情况下父作用域的不被认作 props 的特性绑定 (attribute bindings) 将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时,这可能不会总是符合预期行为。通过设置 inheritAttrs 到 false,这些默认行为将会被去掉。而通过 (同样是 2.4 新增的) 实例属性 $attrs 可以让这些特性生效,且可以通过 v-bind 显性的绑定到非根元素上。
注意:这个选项不影响 class 和 style 绑定。
comments
类型:boolean
默认值:false
限制:这个选项只在完整构建版本中的浏览器内编译时可用。
详细:
当设为 true 时,将会保留且渲染