Vue Cung cấp/Tiêm
Cung cấp/Tiêm trong Vue được sử dụng để cung cấp dữ liệu từ thành phần này sang thành phần khác, đặc biệt là trong các dự án lớn.
Cung cấp làm cho dữ liệu có sẵn cho các thành phần khác.
Tiêm được sử dụng để lấy dữ liệu được cung cấp.
Cung cấp/Tiêm là một cách để chia sẻ dữ liệu thay thế cho việc truyền dữ liệu bằng cách sử dụng đạo cụ.
Cung cấp/Tiêm
Trong một dự án lớn, với các thành phần bên trong các thành phần, có thể khó sử dụng props để cung cấp dữ liệu từ "App.vue" cho một thành phần phụ, vì nó yêu cầu phải xác định props trong mọi thành phần mà dữ liệu đi qua.
Nếu chúng ta sử dụng cung cấp/tiêm thay vì đạo cụ, chúng ta chỉ cần xác định dữ liệu được cung cấp ở nơi nó được cung cấp và chúng ta chỉ cần xác định dữ liệu được chèn ở nơi nó được tiêm.
Cung cấp dữ liệu
Chúng tôi sử dụng tùy chọn cấu hình 'cung cấp' để cung cấp dữ liệu cho các thành phần khác:
App.vue
:
<template>
<h1>Food</h1>
<div @click="this.activeComp = 'food-about'" class="divBtn">About</div>
<div @click="this.activeComp = 'food-kinds'" class="divBtn">Kinds</div>
<div id="divComp">
<component :is="activeComp"></component>
</div>
</template>
<script>
export default {
data() {
return {
activeComp: 'food-about',
foods: [
{ name: 'Pizza', imgUrl: '/img_pizza.svg' },
{ name: 'Apple', imgUrl: '/img_apple.svg' },
{ name: 'Cake', imgUrl: '/img_cake.svg' },
{ name: 'Fish', imgUrl: '/img_fish.svg' },
{ name: 'Rice', imgUrl: '/img_rice.svg' }
]
}
},
provide() {
return {
foods: this.foods
}
}
}
</script>
Trong đoạn mã trên, mảng 'thực phẩm' hiện đã được cung cấp để có thể đưa vào các thành phần khác trong dự án của bạn.
Tiêm dữ liệu
Giờ đây, mảng 'foods' được cung cấp bởi 'provide' trong 'App.vue', chúng ta có thể đưa nó vào thành phần 'FoodKinds'.
Với dữ liệu 'thực phẩm' được đưa vào thành phần 'FoodKinds', chúng ta có thể sử dụng dữ liệu từ App.vue để hiển thị các loại thực phẩm khác nhau trong thành phần 'FoodKinds':
Ví dụ
FoodKinds.vue
:
<template>
<h2>Different Kinds of Food</h2>
<p><mark>In this application, food data is provided in "App.vue", and injected in the "FoodKinds.vue" component so that it can be shown here:</mark></p>
<div v-for="x in foods">
<img :src="x.imgUrl">
<p class="pName">{{ x.name }}</p>
</div>
</template>
<script>
export default {
inject: ['foods']
}
</script>
<style scoped>
div {
margin: 10px;
padding: 10px;
display: inline-block;
width: 80px;
background-color: #28e49f47;
border-radius: 10px;
}
.pName {
text-align: center;
}
img {
width: 100%;
}
</style>
Chạy ví dụ »