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>
运行示例 »