Vue 傳遞屬性
元件可以接受未宣告為 prop 的屬性，這些屬性將簡單地傳遞到元件的根元素。
透過傳遞屬性，您可以在父元件中更好地概覽元件的建立，並且可以簡化我們的程式碼，因為我們不必將屬性宣告為 prop。
通常用於傳遞的屬性是 class、style 和 v-on。
傳遞屬性
例如，從父元件控制組件的樣式會比將樣式隱藏在元件內部要好。
讓我們建立一個新的示例，一個 Vue 中的基本待辦事項列表，看看 style 屬性如何傳遞到代表待辦事項的元件。
因此，我們的 App.vue 應包含待辦事項列表，一個 <input> 元素和一個 <button> 來新增新的待辦事項。每個列表項都是一個 <todo-item /> 元件。
App.vue:
<template>
<h3>Todo List</h3>
<ul>
<todo-item
v-for="x in items"
:key="x"
:item-name="x"
/>
</ul>
<input v-model="newItem">
<button @click="addItem">Add</button>
</template>
<script>
export default {
data() {
return {
newItem: '',
items: ['Buy apples','Make pizza','Mow the lawn']
};
},
methods: {
addItem() {
this.items.push(this.newItem),
this.newItem = '';
}
}
}
</script>
而 TodoItem.vue 僅透過 prop 接收待辦事項的描述
TodoItem.vue:
<template>
<li>{{ itemName }}</li>
</template>
<script>
export default {
props: ['itemName']
}
</script>
為了正確構建我們的應用程式，我們還需要在 main.js 中進行正確的設定
main.js:
import { createApp } from 'vue'
import App from './App.vue'
import TodoItem from './components/TodoItem.vue'
const app = createApp(App)
app.component('todo-item', TodoItem)
app.mount('#app')
為了理解本節的重點，即屬性可以傳遞到我們元件 <template> 中的根元素，我們可以為列表項設定一些來自 App.vue 的樣式
示例
我們為元件內的 <li> 元素設定樣式，來自 App.vue
<template>
<h3>Todo List</h3>
<ul>
<todo-item
v-for="x in items"
:key="x"
:item-name="x"
style="background-color: lightgreen;"
/>
</ul>
<input v-model="newItem">
<button @click="addItem">Add</button>
</template>
要確認 style 屬性實際上已經傳遞，您可以在瀏覽器中右鍵單擊待辦事項列表中的 <li> 元素，選擇“檢查”，您就可以看到 style 屬性現在已新增到 <li> 元素上了
合併 'class' 和 'style' 屬性
如果 'class' 或 'style' 屬性已設定，並且 'class' 或 'style' 屬性也來自父元件作為傳遞屬性，則這些屬性將被合併。
示例
除了父元件的現有樣式外，我們還為 TodoItem.vue 元件內的 <li> 元素添加了 margin
<template>
<li style="margin: 5px 0;">{{ itemName }}</li>
</template>
<script>
export default {
props: ['itemName']
}
</script>
如果在瀏覽器中右鍵單擊 <li> 元素，您可以看到屬性已被合併。Margin 直接設定在元件內的 <li> 元素上，並與從父元件傳遞的 background-color 合併
$attrs
如果元件的根級別有多個元素，就不清楚屬性應該傳遞到哪個元素。
要定義哪個根元素獲取傳遞的屬性，我們可以使用內建的 $attrs 物件來標記該元素，如下所示
示例
TodoItem.vue:
<template>
<div class="pinkBall"></div>
<li v-bind="$attrs">{{ itemName }}</li>
<div class="pinkBall"></div>
</template>
