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 对象
