Vue.js v-is指令动态渲染组件
来源：互联网 2026-07-18 08:33:09动态组件通过`:is`指令绑定响应式变量实现组件动态切换，变量值支持三种类型：已注册组件名、组件对象或null。组件需在`components`选项中提前注册，且大小写必须一致。动态切换时支持传递props参数和事件通信，注意错误写法`v-is`无效。
很多Vue开发者可能听说过v-is这个指令，但事实上Vue中并没有这个指令。这是一个比较常见的误解——正确的写法其实是:is，也就是v-bind:is的简写。这个指令专门用在
长期稳定更新的攒劲资源： >>>点此立即查看<<<
Vue动态组件核心写法
代码其实非常简单直观：
这里有几个关键点需要把握：
:is绑定的是一个响应式变量，而不是一个固定的字符串；- 这个变量的值可以有三种选择：
- 已经注册过的组件名，比如
'UserList'； - 直接导入的组件选项对象，比如
import MyComp from './MyComp.vue'之后直接赋值； - 设置为
null或undefined，这样什么都不会渲染。
- 已经注册过的组件名，比如
Vue动态组件必须提前注册组件
这一点很容易被忽略：你不能光靠一个名字就让Vue自动找到组件。它必须在当前组件的 components 选项里老老实实声明好：
export default {
components: {
UserList,
UserProfile,
UserSettings
},
data() {
return {
currentComponent: 'UserList' // 一上来先显示 UserList
}
}
}
一旦 currentComponent 的值变成 'UserProfile'，而且 UserProfile 也已经注册了，Vue就会自动把渲染的组件切换过去，非常丝滑。
Vue动态组件常见错误和注意点
虽然写法很简单，但坑还真不少，这里把几个最典型的列出来：
- 写成
v-is="xxx"→ 完全无效，Vue根本不认这个指令； - 写
:is="UserProfile"（没有加引号，而且这个变量也没定义）→ 直接报错或者渲染失败； - 组件名大小写对不上（比如注册成了
user-list，却写了:is="'UserList'"）→ 匹配不上； - 动态值指向了一个根本没注册的组件名（比如
'NotFound'但components里没它）→ Vue不会报错， - 最稳妥的做法：统一用PascalCase注册和使用（比如
UserProfile），保持一致性。
Vue动态组件配合 props 和事件使用
动态组件在这方面和普通组件没什么区别，照样可以传参和监听事件：
只要目标组件里声明了 props: ['userId']，并且通过 this.$emit('save') 来触发事件，数据通信就能正常跑通。
说来说去，核心逻辑其实不复杂，但正因为太简单，反而容易被一些细节点绊住。把这些关键点记牢，动态组件用起来就顺手多了。
侠游戏发布此文仅为了传递信息，不代表侠游戏网站认同其观点或证实其描述
相关攻略
更多同类更新
更多
热游推荐
更多-
- DreamStudio
- Android/ | AI绘图
- 2026-06-30
-
-
- Playground AI
- Android/ | AI绘图
- 2026-06-30
-
- Adobe Firefly
- Android/ | AI绘图
- 2026-06-30
-
-
-
- Leonardo AI
- Android/ | AI绘图
- 2026-06-30
-
- Stable Diffusion
- Android/ | AI绘图
- 2026-06-30
