Thuộc tính Vue 'is'
Ví dụ
Thuộc is
được kết nối với giá trị được tính toán 'activeComp' bằng v-bind
(viết tắt :
) để thành phần 'comp-one' hoặc thành phần 'comp-two' được hiển thị.
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>
Chạy ví dụ »Xem thêm ví dụ dưới đây.
Định nghĩa và cách sử dụng
Thuộc tính is
có thể được sử dụng cho ba việc:
1. Thành phần động: is
tính is được đặt trên phần tử <component>
tích hợp để tạo thành phần động, trong đó thuộc tính is
xác định thành phần nào sẽ là thành phần hoạt động.
Chi tiết hơn, thuộc tính is
được liên kết với một thuộc tính có v-bind
và thuộc tính giữ tên của thành phần nào sẽ là thành phần hoạt động. (Xem ví dụ ở trên)
2. Thay thế phần tử gốc bằng thành phần Vue: is="vue:my-component"
được đặt trên phần tử HTML gốc để thay thế nó bằng thành phần Vue. (Xem ví dụ 1)
Nếu chúng ta không sử dụng tiền tố vue:
nó sẽ được hiểu là một phần tử tích hợp tùy chỉnh, như được giải thích ngay bên dưới đây và thành phần Vue sẽ không được chèn.
3. Phần tử tích hợp tùy chỉnh: Các phần tử tích hợp tùy chỉnh có thể được viết bằng JavaScript và thuộc tính is
có thể được sử dụng trên thẻ HTML để xác định nó như một phần tử tích hợp tùy chỉnh. Đây không phải là một tính năng của Vue.
Thêm ví dụ
ví dụ 1
Sử dụng thuộc tính is
để thay thế thẻ <img>
bằng thành phần Vue.
App.vue
:
<template>
<h2>Example Built-in 'is' Attribute</h2>
<p>The IMG tag below is set to be replaced by a component by the use of 'is="vue:child-comp"'.</p>
<img is="vue:child-comp" />
</template>
ChildComp.vue
:
<template>
<div>
<h3>ChildComp.vue</h3>
<p>This is the child component</p>
</div>
</template>
<style scoped>
div {
border: solid black 1px;
background-color: lightgreen;
padding: 10px;
max-width: 250px;
margin-top: 20px;
}
</style>
Chạy ví dụ »Trang liên quan
Hướng dẫn Vue: Thành phần động
Hướng dẫn về Vue: Thành phần Vue
Hướng dẫn về Vue: Thuộc tính được tính toán của Vue
Hướng dẫn Vue: Chỉ thị Vue v-bind
Tham khảo Vue: Chỉ thị Vue v-bind
Tham chiếu Vue: Phần tử Vue <thành phần>
Tham chiếu Vue: Đối tượng Vue $refs