首页 > 其他分享 >动态组件

动态组件

时间:2023-03-28 10:15:28浏览次数:36  
标签:console log alive keep 组件 动态 Left

动态组件

动态组件:动态切换组件的显示与隐藏

通过两个按钮,进行Left和Right两个组件的切换

通过keep-alive include和exclude进行组件的选择缓存还是不缓存

而keep-alive有对应的生命周期activated、deactivated

步骤

普通的导入后,再加入

组件生命周期

Left.vue

  created(){
    console.log('Left被创建啦!');
  },
  destroyed() {
    console.log('Left被销毁啦!');
  },
  // keep-alive对应生命周期
  activated(){
    console.log('Left组件被激活啦!');
  },
  deactivated(){
    console.log('Left组件被缓存啦!');
  }

App.vue

  <div id="app">
    <button @click="comName = 'Left'">展示Left</button>
    <button @click="comName = 'Right'">展示Right</button>
    <keep-alive include="Left,Right" >
      <component :is="comName"></component>
    </keep-alive>
  </div>
<!-- keep-alive include 指定哪些组件会把内部的组件进行缓存,而exclude销毁组件 -->
  data() {
    return {
      comName:Left
    }
  }

标签:console,log,alive,keep,组件,动态,Left
From: https://www.cnblogs.com/tupo/p/17263989.html

相关文章