Vue is 属性

实例

is 属性通过 v-bind（缩写 :）连接到计算值 'activeComp'，以便显示 'comp-one' component 组件或 '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 属性可以用于三件事：

动态组件：在内置的 <component> 元素上设置 is 属性以创建动态组件，其中 is 属性定义哪个组件应该是活动组件。

更详细地说，is 属性绑定到一个具有 v-bind 的属性，该属性包含应该是活动组件的名称。（参考上面的实例）
将本地元素替换为 Vue 组件：is="vue:my-component" 本地 HTML 元素上，以将其替换为 Vue 组件。（参见实例 1）

如果我们不使用 vue: 前缀，它将被解释为自定义的内置元素，如下所述，并且 Vue 组件将不会插入。
自定义内置元素：自定义内置元素可以用 JavaScript 编写，并且可以在 HTML 标记上使用 is 属性将其定义为自定义内置元素。这不是 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 is 属性

实例

定义与用法

更多实例

实例 1

分类导航