Vue3 is 属性

Vue3 内置属性 Vue3 組み込み属性

isis 属性は Vue で動的コンポーネントを実現するための中心的な属性であり、現在の要素をどのコンポーネントとしてレンダリングするかを動的に指定します。

基本説明

isis 属性は主に動的コンポーネントのシーンで使用され、実行時にデータに基づいて異なるコンポーネントを動的に切り替えてレンダリングできます。これは Vue で動的コンポーネント機能を実現する主要な方法です。

型: String | Component
役割: コンポーネントを動的に切り替え、コンポーネントの再利用と動的レンダリングを実現します。

基本的な使い方

1、動的コンポーネントの切り替え

使用<component>要素と組み合わせるisis 属性で動的コンポーネントを実現できます：

例

<template>
<div>

<component :is="currentComponent"></component>

<button @click="toggleComponent">コンポーネントを切り替える</button>
</div>
</template>

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
data() {
return {
currentComponent: 'ComponentA'
}
},
components: {
ComponentA,
ComponentB
},
methods: {
toggleComponent() {
this.currentComponent = this.currentComponent === 'ComponentA'
? 'ComponentB'
: 'ComponentA'
}
}
}
</script>

2、コンポーネントオブジェクトの使用

is の値はコンポーネントオブジェクトを直接指定することもできます：

例

<template>
<div>
<component :is="currentComponent"></component>
<button @click="switchToA">A を表示</button>
<button @click="switchToB">B を表示</button>
</div>
</template>

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
data() {
return {
currentComponent: ComponentA
}
},
methods: {
switchToA() {
this.currentComponent = ComponentA
},
switchToB() {
this.currentComponent = ComponentB
}
}
}
</script>

使用シーン

1、タブ切り替え

タブページ切り替えのような効果を実現します：

例

<template>
<div>

<button
v-for="tab in tabs"
:key="tab.name"
:class="{ active: currentTab === tab.name }"
@click="currentTab = tab.name"
>
{{ tab.label }}
</button>


<component :is="currentTabComponent" />
</div>
</template>

<script>
import HomeTab from './tabs/HomeTab.vue'
import ProfileTab from './tabs/ProfileTab.vue'
import SettingsTab from './tabs/SettingsTab.vue'

export default {
data() {
return {
currentTab: 'Home',
tabs: [
{ name: 'Home', label: '首页', component: HomeTab },
{ name: 'Profile', label: '个人资料', component: ProfileTab },
{ name: 'Settings', label: '设置', component: SettingsTab }
]
}
},
computed: {
currentTabComponent() {
const tab = this.tabs.find(t => t.name === this.currentTab)
return tab ? tab.component : null
}
}
}
</script>

2、条件による異なるコンポーネントのレンダリング

条件に応じてレンダリングするコンポーネントを動的に選択します：

例

<template>
<div>
<select v-model="selectedType">
<option value="warning">警告</option>
<option value="error">エラー</option>
<option value="success">成功</option>
</select>

<component :is="alertComponent" :message="message" />
</div>
</template>

<script>
import WarningAlert from './WarningAlert.vue'
import ErrorAlert from './ErrorAlert.vue'
import SuccessAlert from './SuccessAlert.vue'

export default {
data() {
return {
selectedType: 'warning',
message: 'これはヒントメッセージです'
}
},
computed: {
alertComponent() {
const componentMap = {
warning: WarningAlert,
error: ErrorAlert,
success: SuccessAlert
}
return componentMap[this.selectedType]
}
}
}
</script>

ネイティブ要素での is の使用

Vue 3.1+ では、isis 属性をネイティブ HTML 要素に使用すると、ネイティブ Web プラットフォームのカスタム要素機能として解釈されます。

ただし、DOM テンプレート内でネイティブ要素を Vue コンポーネントに置き換える必要がある場合があります。たとえば、<table>でカスタムコンポーネントを行として使用します：

例

使用vue:プレフィックスを付けると、Vue はその要素をネイティブ HTML 要素ではなく Vue コンポーネントとしてレンダリングできます。

注意事項

is 属性の値：コンポーネント名の文字列またはコンポーネントオブジェクトを指定できます。文字列を使用する場合、コンポーネント名は登録されたコンポーネント名と一致している必要があります。

算出プロパティの使用：複雑な条件ロジックに基づいて異なるコンポーネントを返すことができ、より柔軟な動的コンポーネントの切り替えを実現できます。

keep-alive による動的コンポーネントのキャッシュ

使用<keep-alive>動的コンポーネントをラップすると、コンポーネントインスタンスをキャッシュでき、切り替えのたびに再作成することを避けられます：

例

<template>
<div>
<button @click="currentTab = 'home'">ホーム</button>
<button @click="currentTab = 'profile'">プロフィール</button>

<keep-alive>
<component :is="currentTabComponent" />
</keep-alive>
</div>
</template>

<script>
export default {
data() {
return {
currentTab: 'home'
}
},
computed: {
currentTabComponent() {
return this.currentTab + '-tab'
}
}
}
</script>

<keep-alive>切り替えられたコンポーネントインスタンスがキャッシュされ、コンポーネントが再度表示されるときは、再作成されるのではなくキャッシュから直接復元されます。