Vue学习之路(6)-组合配置选项以及其他配置选项

引言

测试基于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 时，将会保留且渲染