vue组件封装案例--动态组件例子

责编:menVScode 2017-11-18 23:10 阅读(1121)

动态组件

        多个组件可以使用同一个挂载点,动态地在它们之间切换。

        使用保留的<component>元素,使用 is 特性进行动态绑定。

        可以使用keep-alive把切出去的组件保留在内存中,这样可以保留它的状态,避免重新渲染。

html代码

<div id="app">
    <input type="button" value="切换到第1个组件" @click="tabComponent(1)" />
    <input type="button" value="切换到第2个组件" @click="tabComponent(2)"/>
    <input type="button" value="切换到第3个组件" @click="tabComponent(3)"/>
    <keep-alive>
        <component :is="current"></component>
    </keep-alive>
</div>

js代码

var custom1 = Vue.component("custom1",{
    template:`<div @click="changeDivbg">我是第1个组件</div>`,
    methods:{
        changeDivbg(ev){
            ev.target.style.background = "red";
        }
    }
});
var custom2 = Vue.component("custom2",{
    template:`<div>我是第2个组件</div>`
})
 var custom3  = Vue.component("custom3",{
    template:`<div>我是第3个组件</div>`
})

new Vue({
    el:"#app",
    data:{
        current:custom1
    },
    methods:{
        tabComponent(index){
            if(index === 1){
                this.current = custom1
            }else if(index === 2){
                this.current = custom2
            }else if(index === 3){
                this.current = custom3
            }
        }
    }
})

        keep-alive作用举例:当点击第一个组件内容的时候,其背景颜色变成红色;然后切换其他组件再切回第一个组件,其背景颜色依旧还是红色。这就是可以使用keep-alive把切出去的组件保留在内存中,这样可以保留它的状态,避免重新渲染。

效果展示:

GIF

标签:
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码