管局备案网站,123邢台招聘信息网,呼和浩特网站建设信息,潍坊市作风建设年网站文章目录 一、vue中的动态组件是什么#xff1f;有什么用#xff1f;二、使用demo1.tab页签中的使用2.模拟新闻页demo 三、用keep-alive包裹#xff0c;保持状态总结 一、vue中的动态组件是什么#xff1f;有什么用#xff1f;
动态组件指可以动态切换组件的显示和隐藏。… 文章目录 一、vue中的动态组件是什么有什么用二、使用demo1.tab页签中的使用2.模拟新闻页demo 三、用keep-alive包裹保持状态总结 一、vue中的动态组件是什么有什么用
动态组件指可以动态切换组件的显示和隐藏。
使用场景比如某些场景会需要在两个组件间来回切换如Tab界面再比如新闻详情页不确定要渲染的是图片相关组件还是文件相关组件有可能都渲染或渲染其中一个或其中多个混合。不知道渲染什么类型的组件可以用动态组件。
写法
component是组件的占位符通过is属性动态指定要渲染的组件名称component is 要渲染的组件的名称/component 点击跳转动态组件的官网地址
二、使用demo
1.tab页签中的使用 代码如下示例 templateel-tabsv-modelactiveNametab-clickhandleClickel-tab-pane label页签1 name组件1页签1/el-tab-paneel-tab-pane label页签2 name组件2页签2/el-tab-pane/kui-tabskeep-alive!-- 动态组件 --component :is组件1/component/keep-alive
/template
script setupimport 组件1 from ./组件1.vueimport 组件2 from ./组件2.vue
// ....activeName 页签1handleClick(tab) {this.activeName tab.name;}
/script2.模拟新闻页demo
代码如下示例
templatediv!-- 动态组件 --div v-for(val, key) in newsData :keykeycomponent :isval.type :dataval.data//div/div
/template
scriptimport text form ./text.vueimport img from ./img.vue...export default {...data() {return {newsData: [{type: text, data:[]},{type: img, data:[]},...]}}}
/script三、用keep-alive包裹保持状态
当使用component :is... 来在多个组件间作切换时被切换掉的组件会被卸载。我们可以通过KeepAlive组件强制被切换掉的组件仍然保持“存活”的状态。
!-- currentTab 改变时组件也改变 --keep-alivecomponent :istabs[currentTab]/component/keep-alive总结
动态组件可以动态切换组件的显示与隐藏。 不知道渲染什么类型的组件需要根据数据确定组件类型时可以使用动态组件。
