vue用于动态切换组件的内置组件,vue3.0动态组件
让多个组件使用同一个挂载点，动态切换，这就是动态组件。下面文章主要介绍Vue高级使用示例教程关于动态组件的相关信息，通过示例代码详细介绍。有需要的朋友可以参考一下。
目录
基本描述AST解析渲染函数常用组件与动态组件的比较工厂函数形式的动态组件总结相信在开发过程中会用到大部分。当我们需要在不同组件之间进行状态切换时，动态组件可以很好地满足我们的需求，其核心就是组件标签和is属性的使用。
基础描述
//vue
div id=应用程序
按钮@ click= change tabs( child 1 ) child 1/button
button @ click= change tabs( child 2 ) child 2/button
button @ click= change tabs( child 3 ) child 3/button
组件：is=chooseTabs
/组件
/div
//js
var child1={
模板：“divcontent1/div”，
}
var child2={
模板：“divcontent2/div”
}
var child3={
模板：“divcontent3/div”
}
var vm=new Vue({
埃尔： #app ，
组件：{
儿童1，
孩子2，
儿童3
},
方法：{
变更标签(标签){
this.chooseTabs=tab
}
}
})
AST解析
component的解释和前面的文章一致，会从AST分析阶段开始，过程不会关注每一个细节，但会具体解释和前面处理方法的区别。针对动态组件解析的差异，重点介绍了processComponent，由于标签上存在is属性，它会在最终的ast树上标记组件属性。
//解析动态组件
函数进程组件(el) {
var绑定；
//获取is属性对应的值
if ((binding=getBindingAttr(el， is))) {
AST树中有更多组件属性
el.component=binding
}
if (getAndRemoveAttr(el， inline-template )！=null) {
el.inlineTemplate=true
}
}
render函数
有了ast树，下一步就是根据ast树生成可执行的渲染函数。由于组件属性，渲染函数的生成过程将采用genComponent分支。
//render function生成函数
var code=generate(ast，options)；
//生成函数的实现
函数生成(ast，选项){
var state=new CodegenState(选项)；
var code=ast？genElement(ast，state): _ c( div )；
返回{
render:( with(this){ return code } )，
static renderfns:state . static renderfns
}
}
函数genElement(el，state) {
var代码；
//动态组件分支
if (el.component) {
code=genComponent(el.component，el，state)；
}
}
动态组件的处理逻辑实际上非常简单。当没有内联模板标志时(后面会讲到)，获取后续子节点进行拼接。与普通组件唯一不同的是_c的第一个参数不再是指定的字符串，而是代表组件的变量。
//动态组件的处理
函数genComponent(
组件名，
埃尔，
状态
) {
//当拥有inlineTemplate属性时，children为null。
var children=el.inlineTemplate？null : genChildren(el，state，true)；
return (_c( componentName ，)(genData$2(el，state))
(孩子？(，子代) : ) ))
}
普通组件和动态组件的对比
普通组件渲染功能
with(this){return _c(div ，{attrs:{id:app}}，[_c(child1 ，[_ v(_ s(test))]]，1)}
动态组件的渲染功能
with(this){return _c(div ，{attrs:{id:app}}，[_c(chooseTabs，{tag:component})]，1)}
简而言之，动态组件与普通组件的区别在于：
ast阶段增加了一个新的组件属性，这是动态组件的标志。
在生成渲染函数的阶段，由于组件属性的存在，会执行genComponent分支，genComponent会对动态组件的执行函数进行特殊处理。与普通组件不同，_c的第一个参数不再是不变的字符串，而是指定的组件名变量。
render-to-vnode阶段与普通组件具有相同的过程，只是字符串被更改为变量，并且它具有{tag: component}的数据属性。示例中的ChooseTabs此时采用child1。
工厂函数形式的动态组件
您还可以使用工厂函数形式的以下动态组件：
const AsyncComponent=()=({
//需要加载的组件(应该是Promise对象)
组件：导入(。/my component . vue’)，
//加载异步组件时使用的组件
加载：加载组件，
//加载失败时要使用的组件
错误：错误组件，
//显示组件加载时的延迟时间。默认值为200(毫秒)。
延时：200，
//如果提供了超时，并且组件加载也超时，
//然后使用加载失败时使用的组件。默认值为：无穷大。
超时：3000
});
组件：{
异步组件，
},
总结
这就是这篇关于Vue高级用法的动态组件的文章。有关Vue动态组件的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。