动态组件＜component＞＜/component＞、＜keep-alive＞＜/keep-alive＞

• Vue内置的组件：：动态组件，你说我是谁，我就是谁；
• 有一个属性 is ，属性值是组件名称，加在，则就是这个组件；
• 如果属性值是一个变量状态，要在is前面加上“：”动态绑定；

• 组件切换没有复用性，就是你在上一个组件上临时创建的值，让你切换到下一个组件后再切回来时，这个临时值没有了；
• 因为切换下一个组件上一个组件就删了，再切回来时再创建新的组件；
• 如果想让组件不被删除，活下去；
• 就在外面加上

没用<component>之前，切换组件要用which这个中间状态： 

"which===home">
<list v-show="which===home">list>
<shopcar v-show="which===home">shopcar>

    <div id="box">
 
        <home v-show="which===home">home>
        <list v-show="which===home">list>
        <shopcar v-show="which===home">shopcar>
 
        <footer>
            <ul>
                <li @click="which='home'">
                    首页
                li>
                <li @click="which='list'">
                    列表
                li>
                <li @click="which='shopcar'">
                    购物车
                li>
            ul>
        footer>
    div>
    <script>
        Vue.component("home",{
            template:`
            
home
`
        })
 
        Vue.component("list",{
            template:`
            
list
`
        })
 
        Vue.component("shopcar",{
            template:`
            
shopcar
`
        })
 
 
        new Vue({
            el:"#box",
            data:{
                which:"home"
            },
            methods:{
                
            }
        })
    script>

 

用之后代码：用之后想把component当做某个标签就把它当做那个标签:

DOCTYPE html>