Vue 3.0 選項(xiàng) 雜項(xiàng)

#name

• 類型：string

• 詳細(xì)：

允許組件模板遞歸地調(diào)用自身。注意，組件在全局用 Vue.createApp({}).component({}) 注冊(cè)時(shí)，全局 ID 自動(dòng)作為組件的 name。

指定 name 選項(xiàng)的另一個(gè)好處是便于調(diào)試。有名字的組件有更友好的警告信息。另外，當(dāng)在有 vue-devtools，未命名組件將顯示成 <AnonymousComponent>，這很沒(méi)有語(yǔ)義。通過(guò)提供 name 選項(xiàng)，可以獲得更有語(yǔ)義信息的組件樹(shù)。

#delimiters

• Type: Array<string>

• Default: ['{{', '}}']

• Restrictions: 此選項(xiàng)僅在完整版本中可用，并在瀏覽器中編譯模板。

• Details:設(shè)置用于模板內(nèi)文本插入的分隔符。 通常，這用于避免與同樣使用mustache語(yǔ)法的服務(wù)器端框架沖突。

• Example:

  Vue.createApp({
    // Delimiters changed to ES6 template string style
    delimiters: ['${', '}']
  })

#inheritAttrs

• 類型：boolean

• 默認(rèn)：true

• 詳細(xì)：

默認(rèn)情況下父作用域的不被認(rèn)作 props 的 attribute 綁定 (attribute bindings) 將會(huì)“回退”且作為普通的 HTML attribute 應(yīng)用在子組件的根元素上。當(dāng)撰寫(xiě)包裹一個(gè)目標(biāo)元素或另一個(gè)組件的組件時(shí)，這可能不會(huì)總是符合預(yù)期行為。通過(guò)設(shè)置 inheritAttrs 到 false，這些默認(rèn)行為將會(huì)被去掉。而通過(guò)實(shí)例 property $attrs 可以讓這些 attribute 生效，且可以通過(guò) 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>
    `
  })

• 參考禁用 Attribute 繼承