8.vue2.x之vue2.x的选项 / 其它(二)

vue2.x之vue2.x的选项 / 其它(二)

name

组件名，只有作为组件选项时起作用。
Vue.component() 注册时，全局 ID 自动作为组件的 name。

//ID即作为组件的name
Vue.component('ID',{...}) 

有利于vue-devtools组件树的构建，未命名组件显示为 < AnonymousComponent >

delimiters

分隔符。用以改变纯文本插入分隔符。
默认为：["{{", “}}”]
官方示例：

new Vue({
  delimiters: ['${', '}']
})

// 分隔符变成了 ES6 模板字符串的风格

functional

函数式组件。设置选项functional为true会使组件无状态 (没有 data ) 和无实例 (没有 this 上下文)。组件需要的一切都是通过上下文(context)传递,它是一个包括props、children、slots、scopedSlots、data、parent、listeners、injections的对象。函数化组件只是一个函数，所以渲染开销也低很多。

Vue.component('my-functional-button', {
  functional: true,
  render: function (createElement, context) {
    // 完全透传任何特性、事件监听器、子节点等。
    return createElement('button', context.data, context.children)
  }
})

单文件组件模板写法。需要手动添加特性和监听器。data.attrs为 HTML 特性，listeners为事件监听器。

<template functional>
  <button
    class="btn btn-primary
    v-bind="data.attrs"
    v-on="listeners"
  >
    <slot/>
  </button>
</template>

应用场景：
1、程序化地在多个组件中选择一个来代为渲染。
2、在将 children、props、data 传递给子组件之前操作它们。

model

默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event。使用 model 选项可以回避这些情况产生的冲突，让value、 prop 达到不同的目的。

Vue.component('my-checkbox', {
  model: {
      // 显式的将v-model的value用作prop
    prop: 'checked',
    // 显式的声明事件
    event: 'change'
  },
  props: {
    checked: {
      type: Number,
      default: 0
    }
  },
  // ...
})

<my-checkbox v-model="foo" ></my-checkbox>

相当于

<my-checkbox
  :checked="foo"
  @change="val => { foo = val }"
 >
</my-checkbox>

inheritAttrs

默认情况下父作用域的不被认作 props 的特性绑定 (attribute bindings) 将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上。通过设置 inheritAttrs 到 false，这些默认行为将会被去掉。
例如父组件作用域中在子组件上绑定的特性，在子组件中没有通过props注册接受，则会被作为普通的html特性绑定到子组件的根元素上。这种情况会导致如果父组件和其子组件同时有同样的html特性。如type，
则父组件会覆盖掉子组件里的type特性值。解决方法是设置选项inheritAttrs为false。

comments

这个选项只在完整构建版本中的浏览器内编译时可用。当设为 true 时，将会保留且渲染模板中的 HTML 注释。默认行为是舍弃它们。