Vue动态组件实例解析

前端之家收集整理的这篇文章主要介绍了Vue动态组件实例解析前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前面的话

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

概述

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

页面

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

页面

缓存

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

【基础用法

页面

条件判断

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

页面

【activated 和 deactivated】

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

页面

{{msg}}

【include和exclude】

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

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

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

页面

总结

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

原文链接:https://www.f2er.com/vue/36988.html
Vue动态组件

猜你在找的Vue相关文章