Vue 3.0 非Prop的Attribute

該頁面假設(shè)你已經(jīng)閱讀過了組件基礎(chǔ)。如果你還對(duì)組件不太了解，推薦你先閱讀它。

一個(gè)非 prop 的 attribute 是指傳向一個(gè)組件，但是該組件并沒有相應(yīng) props 或 emits 定義的 attribute。常見的示例包括 class、style 和 id 屬性。

#Attribute 繼承

當(dāng)組件返回單個(gè)根節(jié)點(diǎn)時(shí)，非 prop attribute 將自動(dòng)添加到根節(jié)點(diǎn)的 attribute 中。例如，在 <date-picker> 組件的實(shí)例中：

app.component('date-picker', {
  template: `
    <div class="date-picker">
      <input type="datetime" />
    </div>
  `
})

如果我們需要通過 data status property 定義 <date-picker> 組件的狀態(tài)，它將應(yīng)用于根節(jié)點(diǎn) (即 div.date-picker)。

<!-- 具有非prop attribute的Date-picker組件-->
<date-picker data-status="activated"></date-picker>


<!-- 渲染 date-picker 組件 -->
<div class="date-picker" data-status="activated">
  <input type="datetime" />
</div>

同樣的規(guī)則適用于事件監(jiān)聽器：

<date-picker @change="submitChange"></date-picker>

app.component('date-picker', {
  created() {
    console.log(this.$attrs) // { onChange: () => {}  }
  }
})

當(dāng)有一個(gè) HTML 元素將 change 事件作為 date-picker 的根元素時(shí)，這可能會(huì)有幫助。

app.component('date-picker', {
  template: `
    <select>
      <option value="1">Yesterday</option>
      <option value="2">Today</option>
      <option value="3">Tomorrow</option>
    </select>
  `
})

在這種情況下，change 事件監(jiān)聽器從父組件傳遞到子組件，它將在原生 select 的 change 事件上觸發(fā)。我們不需要顯式地從 date-picker 發(fā)出事件：

<div id="date-picker" class="demo">
  <date-picker @change="showChange"></date-picker>
</div>

const app = Vue.createApp({
  methods: {
    showChange(event) {
      console.log(event.target.value) // 將記錄所選選項(xiàng)的值
    }
  }
})

#禁用 Attribute 繼承

如果你不希望組件的根元素繼承 attribute，你可以在組件的選項(xiàng)中設(shè)置 inheritAttrs: false。例如：

禁用 attribute 繼承的常見情況是需要將 attribute 應(yīng)用于根節(jié)點(diǎn)之外的其他元素。

通過將 inheritAttrs 選項(xiàng)設(shè)置為 false，你可以訪問組件的 $attrs property，該 property 包括組件 props 和 emits property 中未包含的所有屬性 (例如，class、style、v-on 監(jiān)聽器等)。

使用上一節(jié)中的 date-picker 組件示例，如果需要將所有非 prop attribute 應(yīng)用于 input 元素而不是根 div 元素，則可以使用 v-bind 縮寫來完成。

app.component('date-picker', {
  inheritAttrs: false,
  template: `
    <div class="date-picker">
      <input type="datetime" v-bind="$attrs" />
    </div>
  `
})

有了這個(gè)新配置，data status attribute 將應(yīng)用于 input 元素！

<!-- Date-picker 組件 使用非 prop attribute -->
<date-picker data-status="activated"></date-picker>


<!-- 渲染 date-picker 組件 -->
<div class="date-picker">
  <input type="datetime" data-status="activated" />
</div>

#多個(gè)根節(jié)點(diǎn)上的 Attribute 繼承

與單個(gè)根節(jié)點(diǎn)組件不同，具有多個(gè)根節(jié)點(diǎn)的組件不具有自動(dòng) attribute 回退行為。如果未顯式綁定 $attrs，將發(fā)出運(yùn)行時(shí)警告。

<custom-layout id="custom-layout" @click="changeValue"></custom-layout>

// 這將發(fā)出警告
app.component('custom-layout', {
  template: `
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
  `
})


// 沒有警告，$attrs被傳遞到<main>元素
app.component('custom-layout', {
  template: `
    <header>...</header>
    <main v-bind="$attrs">...</main>
    <footer>...</footer>
  `
})