Thành phần Vue <KeepAlive>
Ví dụ
Sử dụng thành phần <KeepAlive>
tích hợp sẵn để làm cho các thành phần giữ nguyên thông tin đầu vào của người dùng đã nhập trước đó:
<KeepAlive>
<component :is="activeComp"></component>
</KeepAlive>
Chạy ví dụ »Xem thêm ví dụ dưới đây.
Định nghĩa và cách sử dụng
Thành phần <KeepAlive>
tích hợp được sử dụng xung quanh các thành phần động để lưu vào bộ đệm các thành phần khi chúng không hoạt động, nhờ đó trạng thái của chúng được giữ nguyên.
đạo cụ
Thành phần <KeepAlive>
có thể được sử dụng cùng với các props khác nhau để chúng ta có thể chỉ định thành phần nào sẽ được lưu vào bộ đệm để chúng giữ trạng thái của chúng.
Prop | Description | |
---|---|---|
none | All components are cached so that their state is kept | Run Example » |
include | Optional. Specify the names of the components that should keep their state | Run Example » |
exclude | Optional. Specify the names of the components that should not keep their state | Run Example » |
max | Optional. Specify the maximum number of components that should keep their state. If you specify to cache a maximum of 4 components, it will be the 4 components that were last visited that are cached | Run Example » |
Vòng đời của các thành phần được lưu vào bộ nhớ đệm với <KeepAlive>
Các thành phần được lưu vào bộ nhớ đệm với thành phần <KeepAlive>
tích hợp sẵn sẽ chuyển đổi giữa trạng thái activated
và deactivated
khi chúng được đặt hoặc không được đặt làm thành phần động đang hoạt động.
Các móc vòng đời activated()
và deactivated()
có thể được sử dụng để chạy mã khi thành phần được lưu trong bộ nhớ đệm đó được đặt hoặc không được đặt làm thành phần hoạt động.
Thêm ví dụ
Ví dụ
Sử dụng prop include
để chỉ định thành phần nào sẽ lưu trữ các giá trị:
<KeepAlive include="CompOne,CompThree">
<component :is="activeComp"></component>
</KeepAlive>
Chạy ví dụ »Ví dụ
Sử dụng prop exclude
để chỉ định thành phần nào sẽ không lưu trữ các giá trị:
<KeepAlive exclude="CompOne">
<component :is="activeComp"></component>
</KeepAlive>
Chạy ví dụ »Ví dụ
Sử dụng prop max
để chỉ định số lượng thành phần được truy cập lần cuối sẽ lưu trữ các giá trị:
<KeepAlive :max="2">
<component :is="activeComp"></component>
</KeepAlive>
Chạy ví dụ »Trang liên quan
Hướng dẫn Vue: Thành phần động
Hướng dẫn về Vue: Lifecycle Hook 'đã kích hoạt' và 'đã hủy kích hoạt'