引言

測試基於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 時，將會保留且渲染