Vue.js 利用 v-is 指令动态渲染组件

Vue.js 中没有 v-is 指令，正确写法是 :is（即 v-bind:is），用于 <component> 标签动态渲染已注册组件，需在 components 选项中提前声明，支持传参和事件通信。

Vue.js 中并没有 v-is 指令。这是一个常见误解 —— 正确的写法是 :is（即 v-bind:is），它用在 <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> 渲染为空白，无报错；
• ✅ 推荐使用 PascalCase 注册 + 使用（如 UserProfile），模板中也用相同名称。

---

配合 props 和事件使用

动态组件同样支持传参和监听事件：

立即学习“前端免费学习笔记（深入）”；

<component   :is="currentComponent"   :user-id="activeId"  @save="handleSave"></component>

只要目标组件声明了 props: ['userId'] 并触发 this.$emit('save')，就能正常通信。

---

不复杂但容易忽略。