首页 > 其他分享> > 20 vue之动态组件+vue之keep-alive

20 vue之动态组件+vue之keep-alive

2022-02-14 22:03:18 作者：互联网

1 动态组件

1 <component> 元素，动态地绑定多个组件到它的 is 属性
2 <keep-alive> 保留状态，避免重新渲染

2 基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ref放在子组件上</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="box">
    <span @click="who='child1'">首页</span>
    &nbsp;&nbsp;
    <span @click="who='child2'">商品</span>
    &nbsp;&nbsp;
    <span @click="who='child3'">购物</span>
    <hr>

    <componet :is="who"></componet>


</div>
</body>
<script>
    Vue.component('child1', {
        template: `<div>
          首页
        </div>`,

    })
    Vue.component('child2', {
        template: `<div>
                   商品
                    </div>`,
    })
    Vue.component('child3', {
        template: `<div>
                   购物车
                    </div>`,
    })

    let vm = new Vue({
        el: '#box',
        data: {
            who:'child1'
        },
        methods:{
        }

    })

</script>
</html>

二、vue之keep-alive

1 不使用keep-alive

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态组件</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="box">
    <span @click="who='child1'">首页</span>
    &nbsp;&nbsp;
    <span @click="who='child2'">商品</span>
    &nbsp;&nbsp;
    <span @click="who='child3'">购物</span>
    <hr>

    <componet :is="who"></componet>


</div>
</body>
<script>
    Vue.component('child1', {
        template: `<div>
          首页
        </div>`,

    })
    Vue.component('child2', {
        template: `<div>
                   商品
                   <input type="text">
                    </div>`,
    })
    Vue.component('child3', {
        template: `<div>
                   购物车
                    </div>`,
    })

    let vm = new Vue({
        el: '#box',
        data: {
            who:'child1'
        },
        methods:{
        }

    })

</script>
</html>

2 使用keep-alive

keep-alive 保留状态，避免重新渲染

<keep-alive>
         <component :is="who"></component>
</keep-alive>

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态组件</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="box">
    <span @click="who='child1'">首页</span>
    &nbsp;&nbsp;
    <span @click="who='child2'">商品</span>
    &nbsp;&nbsp;
    <span @click="who='child3'">购物</span>
    <hr>

    <keep-alive>
        <componet :is="who"></componet>
    </keep-alive>



</div>
</body>
<script>
    Vue.component('child1', {
        template: `<div>
          首页
        </div>`,

    })
    Vue.component('child2', {
        template: `<div>
                   商品
                   <input type="text">
                    </div>`,
    })
    Vue.component('child3', {
        template: `<div>
                   购物车
                    </div>`,
    })

    let vm = new Vue({
        el: '#box',
        data: {
            who:'child1'
        },
        methods:{
        }

    })

</script>
</html>

标签：child1,Vue,20,component,alive,vue,nbsp,template
来源： https://www.cnblogs.com/Haier123/p/15894305.html