vue.js 中没有 v-is 指令，正确写法是 :is（即 v-bind:is），用于 标签动态渲染已注册组件，需在 components 选项中提前声明，支持传参和事件通信。
Vue.js 中并没有 v-is 指令。这是一个常见误解 —— 正确的写法是 :is（即 v-bind:is），它用在 <component></component> 标签上，用于动态决定渲染哪个组件。
动态组件的核心写法
<component :is="currentComponent"></component>
-
:is是v-bind:is的缩写，绑定的是一个响应式变量； -
currentComponent的值可以是：- 已注册的组件名（字符串，如
'UserList'）； - 组件的选项对象（如
import MyComp from './MyComp.vue'后直接赋值）； - 或者
null/undefined（此时不渲染任何内容）。
- 已注册的组件名（字符串，如
必须提前注册组件
你不能只靠名字就让 Vue 找到组件 —— 它必须在当前组件的 components 选项中声明：
export default {
components: {
UserList,
UserProfile,
UserSettings
},
data() {
return {
currentComponent: 'UserList' // 初始显示 UserList
}
}
}
如果 currentComponent 被设为 'UserProfile'，且 UserProfile 已注册，就会自动切换渲染。
常见错误和注意点
- ❌ 写成
v-is="xxx"→ 无效，Vue 不识别该指令； - ❌
:is="UserProfile"（没加引号且未定义变量）→ 报错或渲染失败； - ❌ 组件名大小写不一致（比如注册为
user-list，却写:is="'UserList'"）→ 匹配失败； - ❌ 动态值为未注册的组件名（如
'NotFound'但没在components里声明）→<component></component>渲染为空白，无报错； - ✅ 推荐使用 PascalCase 注册 + 使用（如
UserProfile），模板中也用相同名称。
配合 props 和事件使用
动态组件同样支持传参和监听事件：
<component :is="currentComponent" :user-id="activeId"></component>
只要目标组件声明了 props: ['userId'] 并触发 this.$emit('save')，就能正常通信。
不复杂但容易忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
