8.Vue实例的其它选项

1. name——组件名字

• 类型：string

• 限制：只有作为组件选项时起作用。

• 详细：

  允许组件模板递归地调用自身。注意，组件在全局用 Vue.component() 注册时，全局 ID 自动作为组件的 name。

  指定 name 选项的另一个好处是便于调试。有名字的组件有更友好的警告信息。另外，当在有 vue-devtools，未命名组件将显示成 <AnonymousComponent>，这很没有语义。通过提供 name 选项，可以获得更有语义信息的组件树。

  

  

  

  

2. delimiters——改变纯文本插入分隔符{{ }}

• 类型：Array<string>

• 默认值：["{{", "}}"]

• 限制：这个选项只在完整构建版本中的浏览器内编译时可用。

• 详细：

  改变纯文本插入分隔符。

• 示例：

  new Vue({
    delimiters: ['${', '}']
  })
  ​
  // 分隔符变成了 ES6 模板字符串的风格
  

  

  

  

3. functional——无状态 (没有 data) 和无实例 (没有 this 上下文)的函数式组件

• 类型：boolean

• 详细：

  使组件无状态 (没有 data) 和无实例 (没有 this 上下文)。他们用一个简单的 render 函数返回虚拟节点使它们渲染的代价更小。

  

  

• 参考：函数式组件

4. model——允许一个自定义组件在使用 v-model 时定制 prop 和 event

• 类型：{ 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>
  

5. inheritAttrs——父作用域的attribute 绑定 应用在子组件的根元素上

• 类型：boolean

• 默认值：true

• 详细：

  默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时，这可能不会总是符合预期行为。通过设置 inheritAttrs 到 false，这些默认行为将会被去掉。而通过 (同样是 2.4 新增的) 实例 property $attrs 可以让这些 attribute 生效，且可以通过 v-bind 显性的绑定到非根元素上。

  注意：这个选项不影响 class 和 style 绑定。

  

6. comments——是否保留且渲染模板中的 HTML 注释

• 类型：boolean

• 默认值：false

• 限制：这个选项只在完整构建版本中的浏览器内编译时可用。

• 详细：

  当设为 true 时，将会保留且渲染模板中的 HTML 注释。默认行为是舍弃它们。