动态组件

is="组件的名字">

可以用keep-alive组件实例能够被在它们第一次被创建的时候缓存下来


  is="组件的名字">

 

activated(){}组件激活时调用

deactivated(){}组件停用时调用

一个简单demo

<body>
<div id="root">
    <input type="button" @click="index++;if(index>3){index=0;}" value="切换">
    <components :is="comArr[index]">components>
div>
body>
<script>
    new Vue({
        el:"#root",
        data:{
            index:0,
            comArr:["one","two","three","four"]
        },
        components:{
            one:{
                template:`<div style="background:red">one</div>`
            },
            two:{
                template:`<div style="background:yellow">two</div>`
            },
            three:{
                template:`<div style="background:green">three</div>`
            },
            four:{
                template:`<div style="background:blue">four</div>`
            }
        }
    })
script>

 

你可能感兴趣的:(动态组件)