Thành phần động
Thành phần động có thể được sử dụng để lướt qua các trang trong trang của bạn, như các tab trong trình duyệt, bằng cách sử dụng thuộc tính 'is'.
Thẻ thành phần và thuộc tính 'is'
Để tạo một thành phần động, chúng ta sử dụng thẻ <component> để thể hiện thành phần đang hoạt động. Thuộc tính 'is' được gắn với một giá trị bằng v-bind và chúng tôi thay đổi giá trị đó thành tên của thành phần mà chúng tôi muốn kích hoạt.
Ví dụ
Trong ví dụ này, chúng ta có thẻ <component> đóng vai trò giữ chỗ cho thành phần comp-one hoặc thành phần comp-two . Thuộc tính 'is' được đặt trên thẻ <component> và lắng nghe giá trị được tính toán 'activeComp' chứa giá trị 'comp-one' hoặc 'comp-two'. Và chúng tôi có một nút chuyển đổi thuộc tính dữ liệu giữa 'true' và 'false' để thực hiện chuyển đổi giá trị được tính toán giữa các thành phần hoạt động.
App.vue :
<template>
<h1>Dynamic Components</h1>
<p>App.vue switches between which component to show.</p>
<button @click="toggleValue = !toggleValue">
Switch component
</button>
<component :is="activeComp"></component>
</template>
<script>
export default {
data() {
return {
toggleValue: true
}
},
computed: {
activeComp() {
if(this.toggleValue) {
return 'comp-one'
}
else {
return 'comp-two'
}
}
}
}
</script>
Chạy ví dụ »<Giữ Sống>
Chạy ví dụ dưới đây. Bạn sẽ nhận thấy rằng những thay đổi bạn thực hiện trong một thành phần sẽ bị quên khi bạn chuyển về thành phần đó. Đó là do thành phần này được ngắt kết nối và được gắn lại, tải lại thành phần đó.
Ví dụ
Ví dụ này giống với ví dụ trước ngoại trừ các thành phần khác nhau. Trong comp-one bạn có thể chọn giữa 'Apple' và 'Cake', và trong comp-two bạn có thể viết tin nhắn. Đầu vào của bạn sẽ biến mất khi bạn quay lại một thành phần.
Để giữ nguyên trạng thái, các thông tin đầu vào trước đó của bạn, khi quay lại một thành phần chúng ta sử dụng thẻ <KeepAlive> xung quanh thẻ <component> .
Ví dụ
Các thành phần bây giờ ghi nhớ đầu vào của người dùng.
App.vue :
<template>
<h1>Dynamic Components</h1>
<p>App.vue switches between which component to show.</p>
<button @click="toggleValue = !toggleValue">
Switch component
</button>
<KeepAlive>
<component :is="activeComp"></component>
</KeepAlive>
</template>
Chạy ví dụ »Thuộc tính 'bao gồm' và 'loại trừ'
Tất cả các thành phần bên trong thẻ <KeepAlive> sẽ được giữ nguyên theo mặc định.
Nhưng chúng ta cũng có thể xác định chỉ một số thành phần được duy trì bằng cách sử dụng thuộc tính 'include' hoặc 'exclude' trên thẻ <KeepAlive> .
Nếu chúng ta sử dụng thuộc tính 'include' hoặc 'exclude' trên thẻ <KeepAlive> , chúng ta cũng cần đặt tên cho các thành phần bằng tùy chọn 'name':
CompOne.vue :
<script>
export default {
name: 'CompOne' ,
data() {
return {
imgSrc: 'img_question.svg'
}
}
}
</script>
Ví dụ
Với <KeepAlive include="CompOne"> , chỉ thành phần 'CompOne' mới nhớ trạng thái của nó, các đầu vào trước đó.
App.vue :
<template>
<h1>Dynamic Components</h1>
<p>App.vue switches between which component to show.</p>
<button @click="toggleValue = !toggleValue">
Switch component
</button>
<KeepAlive include="CompOne">
<component :is="activeComp"></component>
</KeepAlive>
</template>
Chạy ví dụ »Chúng ta cũng có thể sử dụng 'loại trừ' để chọn thành phần nào sẽ tồn tại hay không.
Ví dụ
Với <KeepAlive exclude="CompOne"> , chỉ thành phần 'CompTwo' mới ghi nhớ trạng thái của nó.
App.vue :
<template>
<h1>Dynamic Components</h1>
<p>App.vue switches between which component to show.</p>
<button @click="toggleValue = !toggleValue">
Switch component
</button>
<KeepAlive exclude="CompOne">
<component :is="activeComp"></component>
</KeepAlive>
</template>
Chạy ví dụ »Cả 'bao gồm' và 'loại trừ' đều có thể được sử dụng với nhiều thành phần bằng cách phân tách bằng dấu phẩy.
Để thể hiện điều này, chúng ta sẽ thêm một thành phần nữa để có tổng cộng ba thành phần.
Ví dụ
Với <KeepAlive include="CompOne, CompThree"> , cả thành phần 'CompOne' và 'CompThree' sẽ ghi nhớ trạng thái của chúng.
App.vue :
<template>
<h1>Dynamic Components</h1>
<button @click="compNbr++">
Next component
</button>
<KeepAlive include="CompOne,CompThree">
<component :is="activeComp"></component>
</KeepAlive>
</template>
Chạy ví dụ »Thuộc tính 'tối đa'
Chúng ta có thể sử dụng 'max' làm thuộc tính cho thẻ <KeepAlive> để giới hạn số lượng thành phần mà trình duyệt cần ghi nhớ trạng thái.
Ví dụ
Với <KeepAlive :max="2"> , trình duyệt sẽ chỉ ghi nhớ thông tin đầu vào của người dùng về hai thành phần được truy cập gần đây nhất.
App.vue :
<template>
<h1>Dynamic Components</h1>
<label><input type="radio" name="rbgComp" v-model="compName" :value="'comp-one'"> One</label>
<label><input type="radio" name="rbgComp" v-model="compName" :value="'comp-two'"> Two</label>
<label><input type="radio" name="rbgComp" v-model="compName" :value="'comp-three'"> Three</label>
<KeepAlive :max="2">
<component :is="activeComp"></component>
</KeepAlive>
</template>
Chạy ví dụ »