vue动态组件

  1. 组件占位符: component 标签 vue内置标签
    • is 属性的值,表示要渲染的组件的名字
    • is 属性的值,应该是在components 节点下进行注册的
<component is="Right"></component>
  1. keep-alive 可以把内部的组件进行缓存,而不是销毁组件
    • 在使用的时候可以通过 include 指定哪些组件需要被缓存
    • 或者可以通过 exclude 属性指定哪些组件不需要被缓存
    • 注意:不要同时使用 includeexclude 这两个属性
<!-- include -->
<keep-alive include="Right">
	<component :is="comName"></component>
</keep-alive>
<!-- exculde -->
<keep-alive exclude="Right">
	<component :is="comName"></component>
</keep-alive>
  1. name
  • 比如在Right 组件中命名了 name
export default {
	name: 'MyRight'
}
  • 当提供了 name 属性之后,组件的名称就是name属性了
  • 区别:
    • 组件注册名称的应用场景是以标签的形式把注册好的组件,渲染和使用到页面结构之中
    • 组件声明时候的 “name” 名称主要的应用场景是结合keep-alive标签实现组件缓存功能,及在调试工具中的显示
上一篇:vue-router有哪几种导航钩子 keep-alive的详细用法 解决跨域


下一篇:vue路由在keep-alive下的刷新问题 对watch的影响