欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

零基础学习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组件间的跳转切换与缓存: