零基础学习Vue: 第33课 Vue组件间的跳转切换与缓存：

程序员文章站 2022-04-24 09:48:47

...

零基础学习Vue: 第33课 Vue组件间的跳转切换与缓存：

keep-alive：可以保证内部的组件不被销毁
component：动态组件 is属性必填

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <div id="app">
        <!-- 5.设置跳转组件选框 -->
        <!-- type="radio"单选框 v-model="radio" 将input选中的值与变量radio相互绑定 -->
        <input type="radio" v-model="radio" value="home">首页
        <input type="radio" v-model="radio" value="user">用户中心
        <!-- 6.设置跳转组件缓存 -->
        <!-- keep-alive:缓存组件用的标签 -->
        <keep-alive>
            <!-- component显示组件标签 is="组件名" -->
            <component :is="radio"></component>
        </keep-alive>
    </div>

    <!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>

        //2.创建home局部组件
        let home = {
            template: '<div>首页</div>',
            created() {     //创建完成后执行的钩子 生命周期函数 
                alert('home created')
            },
            destroyed() {   //销毁完成后执行的钩子 生命周期函数 
                alert('home destroy')
            }
        }
        //3.创建user局部组件
        let user = {
            template: '<div>用户中心</div>',
            created() {      //在运行后可见created只执行一次 说明该组件被缓存
                alert('user created')
            },
            destroyed() {   //在运行后可见destroye不会执行 说明该组件没有被销毁
                alert('user destroy')
            }
        }

        //1.创建Vue根组件
        let vm = new Vue({
            el: '#app',
            data: {    //定义一个变量 存放组件名
                radio: 'home'
            },
            components: {   //4.注册组件
                home,
                user
            }
        })
    </script>
</body>
</html>

运行结果如下：

零基础学习Vue: 第33课 Vue组件间的跳转切换与缓存：

上一篇： CSS3实现轮播图效果

下一篇： perl代码实现fasta序列多行转一行