is 是 Vue 中的一个特殊特性，主要用于 动态组件 和 某些 HTML 标签限制下的组件渲染。
is 特性的作用
动态组件
-
可以根据变量动态切换渲染哪个组件，而不用写 v-if 一堆判断。
-
通常搭配
<component>标签使用：
<component :is="currentComponent"></component>
<template><component :is="currentView"></component><button @click="currentView = 'Login'">切换到 Login</button><button @click="currentView = 'Register'">切换到 Register</button>
</template><script>
import Login from './Login.vue'
import Register from './Register.vue'export default {data() {return { currentView: 'Login' }},components: { Login, Register }
}
</script>
在受限制的 HTML 元素内渲染组件
-
比如在
<table>、<ul>等标签中，直接放组件会被浏览器丢弃或渲染错误。 -
is 可以解决这个问题：
<table><tr is="table-row"></tr>
</table>
如果 table-row 是一个组件，使用 is 渲染是合法的。
主要使用场景
-
动态切换页面/组件（如 Tab 切换、弹窗内容）
-
表格、列表等需要特定标签的地方
-
封装通用容器，内容类型不固定
Vue 2 vs Vue 3 区别
-
Vue 2：
<component :is="...">和 HTML 标签上 is 都支持。 -
Vue 3：移除了 HTML 标签的 is 用法，保留
<component :is="...">，因为 HTML 原生 is 会和 Web Components 冲突。