# 杂项

# name

  • 类型:string

  • 详情:

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

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

# inheritAttrs

  • 类型:boolean

  • 默认:true

  • 详情:

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

  • 用法:

    app.component('base-input', {
      inheritAttrs: false,
      props: ['label', 'value'],
      emits: ['input'],
      template: `
        <label>
          {{ label }}
          <input
            v-bind="$attrs"
            v-bind:value="value"
            v-on:input="$emit('input', $event.target.value)"
          >
        </label>
      `
    })
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
  • 参考禁用 Attribute 继承

# compilerOptions 3.1+

  • 类型:Object

  • 详情:

    这是与应用级别的 compilerOptions 配置相对应的组件级别配置。

  • 用法:

    const Foo = {
      // ...
      compilerOptions: {
        delimiters: ['${', '}'],
        comments: true
      }
    }
    
    1
    2
    3
    4
    5
    6
    7

    重要

    和应用级别的 compilerOptions 配置类似,该选项只会在使用完整的构建版本在浏览器内编译模板时生效。

# delimiters deprecated

从 3.1.0 开始被废弃。请换用 compilerOptions.delimiters