ویژگی های عبوری (Fallthrough) (Fallthrough Attributes)
«ویژگی های عبوری (Fallthrough Attributes)» یعنی صفت هایی که پراپس نیستند، اما مستقیم روی ریشه کامپوننت می نشینند. این کار مثل برچسبی است که از والد می آید و روی تگ اصلی می چسبد. بنابراین کد ساده تر می شود و کنترل از والد روشن تر است.
1) مفهوم ویژگی های عبوری
گاهی بهتر است استایل یا رویداد از والد تنظیم شود. بنابراین ویژگی هایی مثل class، style و v-on بدون تعریف پراپس، به ریشه کامپوننت می ریزند.
<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>
<template>
<li>{{ itemName }}</li>
</template>
<script>
export default {
props: [
"itemName"
]
};
<\/script>
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");
2) اعمال استایل از والد با Fallthrough
می خواهیم پس زمینه آیتم ها را از والد تنظیم کنیم. ویژگی style روی ریشه کامپوننت می نشیند و نتیجه در DOM دیده می شود.
<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>
نکته: با «Inspect» می بینی style روی تگ <li> نشسته است.
3) ادغام class و style
اگر داخل کامپوننت هم style یا class باشد، با مقدار والد ادغام می شود. بنابراین هر دو اعمال می شوند.
<template>
<li style="margin: 5px 0;">{{ itemName }}</li>
</template>
<script>
export default {
props: [
"itemName"
]
};
<\/script>
4) تعیین گیرنده با $attrs
اگر چند ریشه در قالب باشد، باید بگوییم کدام عنصر ویژگی ها را بگیرد. از $attrs روی همان عنصر استفاده می کنیم.
<template>
<div class="pinkBall"></div>
<li v-bind="$attrs">{{ itemName }}</li>
<div class="pinkBall"></div>
</template>
هشدار: ویژگی های عبوری پراپس نیستند. پس در props آن ها را تعریف نکن.
نکته: برای رویدادها و پراپس، این صفحات را ببین: $emit در ویو و پراپس ویو. همچنین برای مرور، ویژگی های عبوری ویو را نشانه گذاری کن.
جمع بندی سریع
- ویژگی های غیرپراپس روی ریشه می ریزند.
- از والد،
classوstyleرا بده. - مقادیر
classوstyleادغام می شوند. - با
$attrsعنصر گیرنده را مشخص کن. - پراپس را با Fallthrough قاطی نکن.