VUE组件--动态组件、组件保持存活、异步组件

动态组件

有些场景可能会需要在多个组件之间进行来回切换,在vue中则使用 来实现组件间的来回切换

// App.vue


 changeHandler()使用三目运算符,来实现Component1和Component2之间的相互切换

// Component1.vue
//Component2.vue

 默认为组件1

 VUE组件--动态组件、组件保持存活、异步组件_第1张图片

VUE组件--动态组件、组件保持存活、异步组件_第2张图片

组件保持存活

当组件1切换到组件2时,组件1会被强行销毁

// App.vue




// Component1.vue

// Component2.vue

初始态: 

VUE组件--动态组件、组件保持存活、异步组件_第3张图片

点击“更新数据”:

VUE组件--动态组件、组件保持存活、异步组件_第4张图片

点击“切换组件”:

VUE组件--动态组件、组件保持存活、异步组件_第5张图片

再次点击“切换组件”:

VUE组件--动态组件、组件保持存活、异步组件_第6张图片

据上面的图可以发现在切换组件的过程中,更改过后的数据又变回老数据,则说明在组件的切换中,发生了组件的销毁及重建,若想要阻止切换组件时组件的销毁发生,可加上 (强制将被切换的组件使之仍然保持存活状态)

//App.vue 中的 template

 VUE组件--动态组件、组件保持存活、异步组件_第7张图片

VUE组件--动态组件、组件保持存活、异步组件_第8张图片

VUE组件--动态组件、组件保持存活、异步组件_第9张图片

 此时,在组件切换的过程中,组件不再被销毁重建


异步组件

当有多个组件存在时,项目的运行时,组件默认会被同步加载

当组件过多时,采用同步加载组件会大大降低运行速度,所以vue提出了异步加载组件的方法:defineAsyncComponent 方法进行实现

VUE组件--动态组件、组件保持存活、异步组件_第10张图片

VUE组件--动态组件、组件保持存活、异步组件_第11张图片 实现组件的切换时,没有出现新的网络请求,则说明组件1和组件2一开始就已经被加载

将组件2的导入方式改为以下形式即可实现异步组件的加载:

// App.vue 中的
                    
                    

你可能感兴趣的:(VUE,vue.js,前端,javascript)