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>
