Chào mừng đến với Cafedev! Trong chủ đề này, chúng ta sẽ khám phá cách truyền props vào các thành phần route trong Vue.js. Việc này giúp tăng tính linh hoạt và tái sử dụng của các thành phần, đồng thời giảm sự phụ thuộc trực tiếp vào các route cụ thể. Hãy cùng tìm hiểu cách thức thực hiện điều này và cách sử dụng props để tối ưu hóa ứng dụng của bạn!
Sử dụng $route hoặc useRoute() trong thành phần của bạn tạo ra một sự liên kết chặt chẽ với route giới hạn tính linh hoạt của thành phần vì nó chỉ có thể được sử dụng trên một số URL cụ thể. Mặc dù điều này không nhất thiết là một điều tồi tệ, nhưng chúng ta có thể tách ra hành vi này bằng cách sử dụng tùy chọn props.
Hãy quay lại ví dụ trước đó của chúng ta:
<!-- User.vue -->
<div>
User {{ $route.params.id }}
</div>với:
import User from './User.vue'
// these are passed to `createRouter`
const routes = [
{ path: '/users/:id', component: User },
]Chúng ta có thể loại bỏ sự phụ thuộc trực tiếp vào $route trong User.vue bằng cách khai báo một prop thay thế:
code-group
[Composition API]
<!-- User.vue -->
<script setup>
defineProps({
id: String
})
</script>
<div>
User {{ id }}
</div>[Options API]
<!-- User.vue -->
<script>
export default {
props: {
id: String
}
}
</script>
<div>
User {{ id }}
</div>Sau đó, chúng ta có thể cấu hình route để truyền tham số id như một prop bằng cách thiết lập props: true:
const routes = [
{ path: '/user/:id', component: User, props: true }
]Điều này cho phép bạn sử dụng thành phần ở bất cứ đâu, điều này làm cho việc sử dụng lại và kiểm tra thành phần dễ dàng hơn.
Nội dung chính
1. Chế độ Boolean
Khi props được đặt thành true, route.params sẽ được đặt làm props của thành phần.
2. Named views
Đối với các route có tên, bạn phải định nghĩa tùy chọn props cho mỗi named view:
const routes = [
{
path: '/user/:id',
components: { default: User, sidebar: Sidebar },
props: { default: true, sidebar: false }
}
]3. Chế độ Object
Khi props là một object, điều này sẽ được đặt làm props của thành phần như là chính nó. Hữu ích khi props là tĩnh.
const routes = [
{
path: '/promotion/from-newsletter',
component: Promotion,
props: { newsletterPopup: false }
}
]4. Chế độ Function
Bạn có thể tạo một hàm trả về props. Điều này cho phép bạn chuyển đổi các tham số thành các kiểu khác, kết hợp các giá trị tĩnh với các giá trị dựa trên route, v.v.
const routes = [
{
path: '/search',
component: SearchUser,
props: route => ({ query: route.query.q })
}
]URL /search?q=vue sẽ truyền {query: 'vue'} như props cho thành phần SearchUser.
Hãy cố gắng giữ cho hàm props không có trạng thái, vì nó chỉ được đánh giá lại khi có thay đổi route. Sử dụng một thành phần bọc nếu bạn cần trạng thái để xác định các props, như vậy Vue có thể phản ứng với các thay đổi trạng thái.
5. Thông qua RouterView
Bạn cũng có thể truyền bất kỳ props nào thông qua <code slot>:
<RouterView v-slot="{ Component }">
<component
:is="Component"
view-prop="value"
/>
</RouterView>Cảnh báo Trong trường hợp này, tất cả các thành phần xem sẽ nhận được view-prop. Điều này thường không phải là ý tưởng tốt vì điều đó có nghĩa là tất cả các thành phần xem đã khai báo một prop view-prop, điều này không nhất thiết là đúng. Nếu có thể, hãy sử dụng bất kỳ tùy chọn nào ở trên.
Trong bài viết này, chúng ta đã tìm hiểu cách truyền props vào các thành phần route trong Vue.js. Việc này giúp tăng tính linh hoạt và tái sử dụng của ứng dụng. Nhờ props, chúng ta có thể tạo ra các thành phần route độc lập và dễ bảo trì. Hy vọng rằng thông tin trong bài viết sẽ hữu ích cho bạn trong quá trình phát triển ứng dụng của mình trên nền tảng Vue.js. Đừng quên theo dõi Cafedev để cập nhật thêm nhiều kiến thức bổ ích khác nhé!
Tham khảo thêm: MIỄN PHÍ 100% | Series tự học Vuejs từ cơ bản tới nâng cao
Các nguồn kiến thức MIỄN PHÍ VÔ GIÁ từ cafedev tại đây
Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của CafeDev để nhận được nhiều hơn nữa:
Chào thân ái và quyết thắng!
