Dynamic components - // dynamic state holding assembly component - hook function of dynamic components

<!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>

Dynamic Components - hook function of the dynamic components

<!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>

Top upup

Published 151 original articles · won praise 1 · views 1854

Private letter concerns

Dynamic components - // dynamic state holding assembly component - hook function of dynamic components

Dynamic Components - hook function of the dynamic components

Guess you like