13/5-2 Dynamic Components Keep alive.html

<!DOCTYPE html>
<html lang="en">

<head>
    <script type="text/javascript" src="vue.js"></script>
    <meta charset="UTF-8">
    <title>5-2</title>
</head>

<body>
    <br>
    <h3>组件的data 会被缓存</h3>
    <component :is="currentView" keep-alive>
        <!-- component changes when vm.currentview changes! -->
    </component>
    <script>
    Vue.component('c1', {
        template: `
            <input v-model="a">{{a}}
            <button @click="m('home')">home</button>
            <button @click="m('posts')">posts</button>
            <button @click="m('archive')">archive</button>
            <button @click="m(str1)">{{str1}}</button>
        `,
        props: ['str1'],
        methods: {
            m: function(str1) {
                this.$dispatch('parent-events1', str1)
            }
        },
        data: function() {
            return {
                a: 1
            }
        }

    });

    new Vue({
        el: 'body',
        data: {
            currentView: 'home'
        },
        components: {
            home: {
                template: 'component is home <c1 str1="home"></c1>'
            },
            posts: {
                template: 'component is posts <c1 str1="posts"></c1>'
            },
            archive: {
                template: 'component is archive <c1 str1="archive"></c1>'
            }
        },
        events: {
            'parent-events1': function(str1) {
                this.currentView = str1;
            }
        }
    })
    </script>
</body>

</html>