建站
咨詢
售后
建站咨詢
新聞中心
該頁面假設你已經(jīng)閱讀過了組件基礎。如果你還對組件不太了解，推薦你先閱讀它。
創(chuàng)新互聯(lián)是一家專業(yè)從事成都網(wǎng)站設計、成都做網(wǎng)站的網(wǎng)絡公司。作為專業(yè)網(wǎng)站設計公司,創(chuàng)新互聯(lián)依托的技術實力、以及多年的網(wǎng)站運營經(jīng)驗,為您提供專業(yè)的成都網(wǎng)站建設、成都全網(wǎng)營銷推廣及網(wǎng)站設計開發(fā)服務！
一個非 prop 的 attribute 是指傳向一個組件，但是該組件并沒有相應 props 或 emits 定義的 attribute。常見的示例包括 class、style 和 id 屬性。
#Attribute 繼承
當組件返回單個根節(jié)點時，非 prop attribute 將自動添加到根節(jié)點的 attribute 中。例如，在
app.component('date-picker', {
template: `
`
}) 如果我們需要通過 data status property 定義 div.date-picker)。
同樣的規(guī)則適用于事件監(jiān)聽器：
app.component('date-picker', {
created() {
console.log(this.$attrs) // { onChange: () => {} }
}
}) 當有一個 HTML 元素將 change 事件作為 date-picker 的根元素時，這可能會有幫助。
app.component('date-picker', {
template: `
`
}) 在這種情況下，change 事件監(jiān)聽器從父組件傳遞到子組件，它將在原生 select 的 change 事件上觸發(fā)。我們不需要顯式地從 date-picker 發(fā)出事件：
const app = Vue.createApp({
methods: {
showChange(event) {
console.log(event.target.value) // 將記錄所選選項的值
}
}
})#禁用 Attribute 繼承
如果你不希望組件的根元素繼承 attribute，你可以在組件的選項中設置 inheritAttrs: false。例如：
禁用 attribute 繼承的常見情況是需要將 attribute 應用于根節(jié)點之外的其他元素。
通過將 inheritAttrs 選項設置為 false，你可以訪問組件的 $attrs property，該 property 包括組件 props 和 emits property 中未包含的所有屬性 (例如，class、style、v-on 監(jiān)聽器等)。
使用上一節(jié)中的 date-picker 組件示例，如果需要將所有非 prop attribute 應用于 input 元素而不是根 div 元素，則可以使用 v-bind 縮寫來完成。
app.component('date-picker', {
inheritAttrs: false,
template: `
`
}) 有了這個新配置，data status attribute 將應用于 input 元素！
#多個根節(jié)點上的 Attribute 繼承
與單個根節(jié)點組件不同，具有多個根節(jié)點的組件不具有自動 attribute 回退行為。如果未顯式綁定 $attrs，將發(fā)出運行時警告。
// 這將發(fā)出警告
app.component('custom-layout', {
template: `
...
...
`
})
// 沒有警告，$attrs被傳遞到元素
app.component('custom-layout', {
template: `
...
...
`
}) 文章名稱：創(chuàng)新互聯(lián)VUE3教程：Vue3.0非Prop的Attribute
本文URL：http://www.5511xx.com/article/cdhicph.html
