Vue动态组件实例解析

前面的话

  让多个组件使用同一个挂载点,并动态切换,这就是动态组件。本文将详细介绍Vue动态组件

概述

  通过使用保留的 元素,动态地绑定到它的 is 特性,可以实现动态组件

页面

  也可以直接绑定到组件对象上

页面

缓存

   包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 相似, 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中

【基础用法

页面

条件判断

  如果有多个条件性的子元素, 要求同时只有一个子元素被渲染

页面

【activated 和 deactivated】

  activated 和 deactivated 在 树内的所有嵌套组件中触发

页面

{{msg}}

【include和exclude】

  include 和 exclude 属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示

  匹配首先检查组件自身的 name 选项,如果 name 选项不可用,则匹配它的局部注册名称(父组件 components 选项的键值)。匿名组件不能被匹配

  上面的代码,表示只缓存home和archive,不缓存posts

页面

总结

以上所述是小编给大家介绍的Vue动态组件实例解析,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Vue动态组件

相关文章

问题现象 elmentui的el-tree数据加载问题,导致第一次加载选中当前节点和高亮当前节点没有生效。 解决方...
因为刚打开文件,vscode默认是预览状态,如果编辑过之后,就不会有这个问题。 可以通过双击将预览状态接...
前言 上篇文章我们介绍了国产SM4加密算法的后端java实现方案。没有看过的小伙伴可以看一下这篇文章。 h...
在项目中引入动态路由时报错 写法: 报错: Module build failed (from ./node_modules/_eslint-loader@2...
问题产生 在使用babel编译es6时,遇到报错Uncaught ReferenceError: regeneratorRuntime is not define...
父组件的编写 <a:orgCode=orgCode ></a> 在data里面增加...