vue动态切换组件

最新推荐文章于 2024-05-23 09:06:46 发布

九零七

最新推荐文章于 2024-05-23 09:06:46 发布

阅读量1.5k

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/weixin_46313540/article/details/106332972

版权

本文介绍了如何在Vue中实现动态组件切换，通过`component`和`is`属性来动态加载不同的组件。同时，讨论了利用`keep-alive`进行组件状态缓存的方法，以避免频繁重渲染造成的性能影响。`keep-alive`的`include`属性用于指定哪些组件应该被缓存，可以基于组件的name或局部注册名称进行匹配。

摘要由CSDN通过智能技术生成

实现动态切换组件

使用 <component is="组件名"></component>
component为内置组件，使用 is = “组件名”，就会自动去找匹配的组件（即is的值写的是哪个组件，component就代表的是哪个组件）

想要改变挂载的组件，只需要修改is对应的值即可

html

<template>
    <div :style="{border: '1px solid red'}">
    
      <button @click="pButton1(0)">Path1</button>
      <button @click="pButton2(1)">Path2</button>
      
     <keep-alive >
        <component :is=