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

最新推荐文章于 2024-05-10 10:40:56 发布

舜岳

最新推荐文章于 2024-05-10 10:40:56 发布

阅读量781

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_41614928/article/details/89550296

版权

vue 专栏收录该内容

80 篇文章 8 订阅

订阅专栏

零基础学习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>

运行结果如下：

在这里插入图片描述

舜岳

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
零基础学习Vue: 第33课 Vue组件间的跳转切换与缓存：

零基础学习Vue: 第33课 Vue组件间的跳转切换与缓存：keep-alive：可以保证内部的组件不被销毁component：动态组件 is属性必填<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title&l...
复制链接

扫一扫