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. 动态组件:在内置的 <component> 元素上设置 is 属性来创建动态组件，其中 is 属性定义哪个组件应该是活动组件 一。
更详细地说，is 属性通过 v-bind 绑定到一个属性，并且该属性保存应该是活动组件的名称。 （参见上面的例子）
2. 将原生元素替换为 Vue 组件: is="vue:my-component" 放置在原生 HTML 元素上，以将其替换为 Vue 组件。 （参见示例1）
如果我们不使用 vue: 前缀，它将被解释为自定义的内置元素，如下所述，并且 Vue 组件将不会被插入。
3. 自定义内置元素:自定义内置元素可以用JavaScript编写，并且可以在HTML标签上使用 is 属性将其定义为此类自定义内置元素。 这不是 Vue 的功能。
更多示例
示例 1
使用 is 属性将
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 Computed 计算属性
Vue 教程:Vue v-bind 指令
Vue 参考:Vue v-bind 指令
Vue 参考:Vue <component> 元素
Vue 参考:Vue $refs 对象
