vue 动态组件

最新推荐文章于 2024-05-28 16:22:58 发布

鼓到爆炸的

最新推荐文章于 2024-05-28 16:22:58 发布

阅读量162

点赞数

本文链接：https://blog.csdn.net/LPL0158/article/details/108925440

版权

本文介绍了Vue中动态组件的使用，包括使用`component`组件动态渲染不同组件，以及如何通过`keep-alive`来保持组件状态，避免重渲染导致的性能问题。`keep-alive`会使组件在切换时触发`activated`和`deactivated`生命周期钩子，便于管理组件的激活和停用状态。

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

动态组件

有的时候，我们需要在多个不同的组件之间进行切换。虽然我们可以通过 v-if 来处理，但是会比较麻烦，vue 提供了一个更方便的方式来处理这种情况

component 组件

component 是 vue 内置的一个组件，它提供一个 is 属性用来动态渲染不同的组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .current {
            background: yellow;
        }
    </style>
</head>
<body>

    <div id="app">
        <button @click="goto('InBox')" :class="{'current': currentComponent==='InBox'}">收邮件<

最低0.47元/天解锁文章

鼓到爆炸的

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 动态组件

动态组件有的时候，我们需要在多个不同的组件之间进行切换。虽然我们可以通过 v-if 来处理，但是会比较麻烦，vue 提供了一个更方便的方式来处理这种情况component 组件component 是 vue 内置的一个组件，它提供一个 is 属性用来动态渲染不同的组件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport
复制链接

扫一扫