Vue 'is' 屬性
示例
is 屬性透過 v-bind（簡寫為 :）與計算值 'activeComp' 關聯，以便顯示 'comp-one' 元件或 'comp-two' 元件。
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>
更多示例請參見下方。
定義和用法
is 屬性可用於三個方面：
1. 動態元件：is 屬性設定在內建的 <component> 元素上，以建立動態元件，其中 is 屬性定義了哪個元件應該是活動的。
更具體地說，is 屬性透過 v-bind 繫結到一個屬性，該屬性儲存了應該活動的元件的名稱。（參見上面的示例）
2. 使用 Vue 元件替換原生元素：將 is="vue:my-component" 放在原生 HTML 元素上，以用 Vue 元件替換它。（參見示例 1）
如果我們不使用 vue: 字首，它將被解釋為自定義內建元素，如下方解釋所示，Vue 元件將不會被插入。
3. 自定義內建元素：自定義內建元素可以用 JavaScript 編寫，並且 is 屬性可以用於 HTML 標籤上，將其定義為這種自定義內建元素。這不是 Vue 的特性。
更多示例
示例 1
使用 is 屬性將 <img> 標籤替換為 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>
相關頁面
Vue 教程：動態元件
Vue 教程：Vue Components
Vue 教程：Vue Computed Properties
Vue 教程：Vue v-bind 指令
Vue 參考：Vue v-bind 指令
Vue 參考：Vue <component> 元素
Vue 參考：Vue $refs 物件
