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

2022/2/14 23:44:19

编程Tag： vue Component template alive 20 nbsp child1

本文主要是介绍20 vue之动态组件+vue之keep-alive，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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>

这篇关于20 vue之动态组件+vue之keep-alive的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！