Thuộc tính Fallthrough của Vue
Một thành phần có thể được gọi với các thuộc tính không được khai báo là props và chúng sẽ chỉ chuyển sang phần tử gốc trong thành phần đó.
Với các thuộc tính dự phòng, bạn sẽ có được cái nhìn tổng quan tốt hơn từ thành phần gốc nơi thành phần được tạo và nó đơn giản hóa mã của chúng ta vì chúng ta không cần khai báo thuộc tính này dưới dạng chỗ dựa.
Các thuộc tính điển hình được sử dụng là class , style và v-on .
Thuộc tính dự phòng
Chẳng hạn, có thể tốt hơn nếu kiểm soát kiểu dáng thành phần từ thành phần gốc thay vì để kiểu dáng ẩn bên trong thành phần.
Hãy tạo một ví dụ mới, một danh sách việc cần làm cơ bản trong Vue và xem thuộc tính style áp dụng như thế nào đối với các thành phần biểu thị những việc cần làm.
Vì vậy, App.vue của chúng ta phải chứa danh sách những việc cần làm, phần tử <input> và <button> để thêm những việc mới cần làm. Mỗi mục danh sách là một thành phần <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>
Và TodoItem.vue chỉ nhận được mô tả về những việc cần làm với vai trò hỗ trợ:
TodoItem.vue :
<template>
<li>{{ itemName }}</li>
</template>
<script>
export default {
props: ['itemName']
}
</script>
Để xây dựng ứng dụng của chúng tôi một cách chính xác, chúng tôi cũng cần thiết lập phù hợp trong 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')
Để hiểu rõ mục đích của phần này, các thuộc tính có thể rơi vào phần tử gốc bên trong <template> của thành phần, chúng ta có thể tạo kiểu cho các mục trong danh sách từ App.vue :
Ví dụ
Chúng tôi tạo kiểu cho các phần tử <li> bên trong thành phần, từ 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>
Chạy Ví dụ » Để xác nhận rằng thuộc tính style đã thực sự bị loại bỏ, chúng ta có thể nhấp chuột phải vào phần tử <li> trong danh sách việc cần làm của chúng ta trên trình duyệt, chọn 'Kiểm tra' và chúng ta có thể thấy thuộc tính style hiện có trên phần tử <li> :
Hợp nhất các thuộc tính 'class' và 'style'
Nếu thuộc tính 'class' hoặc 'style' đã được đặt và thuộc tính 'class' hoặc 'style' cũng xuất phát từ cấp độ gốc dưới dạng thuộc tính dự phòng thì các thuộc tính đó sẽ được hợp nhất.
Ví dụ
Ngoài kiểu dáng hiện có từ phần tử gốc, chúng tôi thêm lề cho các phần tử <li> bên trong thành phần TodoItem.vue :
<template>
<li style="margin: 5px 0;" >{{ itemName }}</li>
</template>
<script>
export default {
props: ['itemName']
}
</script>
Chạy Ví dụ » Nếu chúng ta nhấp chuột phải vào phần tử <li> trong trình duyệt, chúng ta có thể thấy các thuộc tính đã được hợp nhất. Lề được đặt trực tiếp trên phần tử <li> bên trong thành phần và được hợp nhất với màu nền xuất phát từ phần tử gốc:
$attr
Nếu chúng ta có nhiều hơn một phần tử ở cấp độ gốc của thành phần thì không còn rõ ràng các thuộc tính sẽ thuộc về phần tử nào nữa.
Để xác định phần tử gốc nào nhận được các thuộc tính dự phòng, chúng ta có thể đánh dấu phần tử đó bằng đối tượng $attrs tích hợp, như sau:
Ví dụ
TodoItem.vue :
<template>
<div class="pinkBall"></div>
<li v-bind="$attrs" >{{ itemName }}</li>
<div class="pinkBall"></div>
</template>
Chạy Ví dụ »