Vue 的 “is” 属性
示例
is 属性与计算属性 'activeComp' 使用 v-bind (简写 :) 连接，因此 '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 组件
Vue 教程: Vue 计算属性
Vue 教程: Vue v-bind 指令
Vue 参考: Vue v-bind 指令
Vue 参考: Vue <component> 元素
Vue 参考: Vue $refs 对象
