vue中动态组件绑定(is)和缓存keep-alive—tab切换and切换保留所填内容

最新推荐文章于 2024-05-28 16:22:58 发布

原创最新推荐文章于 2024-05-28 16:22:58 发布 · 2.9k 阅读

0 ·

CC 4.0 BY-SA版权

vue学习资料专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的示例，展示了如何通过组件切换并利用<keep-alive>指令保留用户输入的数据。这包括两个组件，分别用于展示书籍和电影信息，每个组件都有各自的输入框，用于收集用户输入，即使在组件间切换，输入的数据也能被保存。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
    <title></title>
</head>

<body>

    <div class="well" id="app">
        <a @click="show(1)">movie</a> ||
        <a @click="show(2)">books</a>
        <keep-alive>     <!--<keep-alive>缓存数据,即tab切换时保留填写内容-->
            <div class="well" :is="flag">
              <!--此处显示的是切换后的具体内容！ -->
            </div>
        </keep-alive>

    </div>


    <script src="bower_components/vue/dist/vue.js"></script>
    <script>
        (function () {
            var books = {
                template: `<div>
                 <h1>畅销书</h1>
                 <ul><li v-for="book in books">{{book}}</li></ul>
                 <div>
                 <h2>{{msg}}</h2>
                 <input type="text" v-model="msg">
</div>
            </div>`,
                data() {
                    return {
                        books: ["angular", "vue", "react"],
                        msg: ""
                    }
                }
            }

            var movies = {
                template: `<div>
                 <h1>最新电影</h1>
                 <ul><li v-for="movie in movies">{{movie}}</li></ul>
                 <div>
                 <h2>{{msg}}</h2>
                 <input type="text" v-model="msg">
</div>
            </div>`,
                data() {
                    return {
                        msg: "",
                        movies: ["电影1", "电影2", "电影3"]
                    }
                }
            }
            
            new Vue({
                el: "#app",
                components: {
                    movies,   //组件名
                    books     //组件名
                },
                data: {
                    flag: "movies"     //同上面组件名(首次展示默认值)
                },
                methods: {
                    show: function (flag) {
                        if (flag == 1) {
                            this.flag = "movies"    //同上面组件名
                        } else {
                            this.flag = "books"     //同上面组件名
                        }
                    }
                }
            });

        })()
    </script>
</body>

</html>