动态组件-保持组件的状态// 动态组件-动态组件的钩子函数

最新推荐文章于 2024-07-25 07:18:20 发布

上头upup

最新推荐文章于 2024-07-25 07:18:20 发布

阅读量489

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_45802159/article/details/103829523

版权

Vue 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

本文探讨了Vue中的动态组件及其钩子函数的使用，详细阐述了如何在切换组件时保持状态，并利用钩子函数进行组件间的生命周期管理。

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

<!DOCTYPE html>
<html lang="zh">

<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>
</head>

<body>

    <div id="app">

        <ul>
            <li><a href="" @click.prevent="page = 'home'">站点主页</a></li>
            <li><a href="" @click.prevent="page = 'news'">新闻中心</a></li>
            <li><a href="" @click.prevent="page = 'about'">关于我们</a></li>
        </ul>


        <!-- 默认情况下，component 内置组件不会保持组件的状态，组件切换出去之后会被销毁，再切换进来时需要重新创建。 -->
        <!-- 为了解决这个问题，我们可以使用 keep-alive 内置组件保持组件的状态。 -->
        <keep-alive include="home,news" :max="2">
            <component :is="page"></component>
        </keep-alive>

    </div>


    <script src="./vue.js"></script>
    <script>

        new Vue({
            el: '#app',
            data: {
                page: 'home'
            },
            components: {
                'home': {
                    template: `<div id="home"><h1>站点主页</h1><p><input type="text"></p></div>`
                },
                'news': {
                    template: `<div id="news"><h1>新闻中心</h1><p><input type="text"></p></div>`
                },
                'about': {
                    template: `<div id="about"><h1>关于我们</h1><p><input type="text"></p></div>`
                }
            }
        })
    </script>
</body>

</html>

动态组件-动态组件的钩子函数

<!DOCTYPE html>
<html lang="zh">

<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>
</head>

<body>

    <div id="app">

        <ul>
            <li><a href="" @click.prevent="page = 'home'">站点主页</a></li>
            <li><a href="" @click.prevent="page = 'news'">新闻中心</a></li>
            <li><a href="" @click.prevent="page = 'about'">关于我们</a></li>
        </ul>


        <!-- 从 Vue 2.2.0 开始，凡是被嵌套到 Keep-alive 内置组件中的组件被切换进来时，
            会执行 activated () 钩子函数，被切换出去时，会执行 deactivated () 钩子函数。 -->

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

    </div>


    <script src="./vue.js"></script>
    <script>

        new Vue({
            el: '#app',
            data: {
                page: 'home'
            },
            components: {
                'home': {
                    activated () {
                        console.log('站点主页被切换进来啦！')
                    },
                    deactivated () {
                        console.log('站点主页被切换出去啦！')
                    },
                    template: `<div id="home"><h1>站点主页</h1><p><input type="text"></p></div>`
                },
                'news': {
                    activated () {
                        console.log('新闻中心被切换进来啦！')
                    },
                    deactivated () {
                        console.log('新闻中心被切换出去啦！')
                    },
                    template: `<div id="news"><h1>新闻中心</h1><p><input type="text"></p></div>`
                },
                'about': {
                    activated () {
                        console.log('关于我们被切换进来啦！')
                    },
                    deactivated () {
                        console.log('关于我们被切换出去啦！')
                    },
                    template: `<div id="about"><h1>关于我们</h1><p><input type="text"></p></div>`
                }
            }
        })
    </script>
</body>

</html>