示例

这个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>

示例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>