vue 动态组件

<template>
  <div id="app">
    <h1>根组件</h1>
    <hr>
    <div class="container">
      <!-- <left></left>
      <Right></Right> -->
      <component :is="comName"></component>
    </div>
   
  </div>
</template>

<script>
import Left from '@/components/Left.vue'
import Right from '@/components/Right.vue'

export default {
  
  name: 'App',
  data(){
    return{
      comName:'Right'
    }
  },
  components: {
    Left,
    Right
  }
}
</script>

<component> 是vue提供的内置组件,专门用来实现动态组件的渲染。它是一个占位符,给组件占位,is属性的值,表示动态的名字,用:is绑定哪个组件的名称,就在这个位置渲染这个组件。

组件被动态显示和隐藏的时候,会被销毁,这时候,如果希望,隐藏的时候,不被销毁,用<keep-alive>标签包裹起来即可。

      <keep-alive>
        <component :is="comName"></component>
      </keep-alive>

vue 动态组件

 vue 动态组件

 当我们遇到需要监听keep-alive标签包裹的组件,什么时候被缓存,什么时候被激活的时候,会触发组件的deactivated和activated生命周期函数。

当组件第一个被创建的时候,会触发ctrated生命周期函数,也会触发activated生命周期函数;

当组件被激活的时候,不会触发created生命周期函数,会触发activated生命周期函数。因为组件没有被重新创建。

      <keep-alive include="Left,Right">
        <component :is="comName"></component>
      </keep-alive>

include属性用来指明需要对哪些组件进行缓存,多个组件名之间,用逗号隔开

上一篇:vue 路由切换页面再次进入更新数据


下一篇:Flask 教程 第十五章:优化应用结构