5-3 组件及组件间的通信-引用模板和动态组件

目录：

引用模板
动态组
keep-alive组件缓存非活动组件

一、引用模板

将组件内容放到模板(<template>)中并引用。Vue专门提供了一个叫template标签，给 template标签设置一个id属性，id的值随便起，然后通过 #id，引用这个模板。

思路图如下：

用法如下：

<body>
    <div id="box">
        <my-hello></my-hello>
    </div>

　　<!--vue专门提供一个template标签，给template设置一个id，id的值自定义，然后通过component中的template获取#id引用模板-->
    <template id="wbs">
        <!--在template中必须有且只有一个根元素，所以在template中所有元素都包含在1个div中-->
        <div> <!--根元素div-->
            <h1>{{msg}}</h1>
            <ul>
                <li v-for="value in arr">{{value}}</li>
            </ul>
        </div>
    </template>

    <script src="../vue.js"></script>
    <script>
        let vm = new Vue({  //根组件
            el:"#box",
            components:{
                'my-hello':{ //my-hello是组件ID，也叫标签，是提供调用的

                    name: 'gao0808', //指定组件的名称，默认是标签名，可以不设置

                    template:'#wbs',  //引用template模板

                    data(){  //组件中的data只能在自己的template中使用
                        return {
                            msg: '欢迎来到高哥哥的博客园',
                            arr: ['tom','jerry','alex']
                        }
                    }
                }
            }
        });
    </script>
</body>

输出：

欢迎来到高哥哥的博客园
tom
jerry
alex

二、动态组件

2.1、前言

其实有的时候，我们会引用相同的组件ID，如下：

<div id="box">
    <my-hello></my-hello>
    <my-hello></my-hello>
</div>

看出来，虽然都是用的一样的，但是它们两个是相互独立的，这两个组件是并列的。

2.2、动态组件

动态组件 => 多个组件要在同一个地方显示，但是它不是同事显示的，可能在满足某些情况下，它显示A组件，在某些情况下，它显示B组件，但是它们显示位置，都在同一个位置显示。

这边我们要用到一个内置的组件：component

用法：多个组件使用同一个挂载点，然后动态的在他们之间切换

<component :is="组件名"></component>

实例如下：

<body>
    <div id="box">
        <button @click="flag='my-hello'">显示hello 组件</button>
        <button @click="flag='my-world'">显示world 组件</button>
        <hr>

        <!--:is="组件名" 表示我要显示的组件-->
        <component :is="flag"></component>

    </div>

    <script src="../vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#box",
            data:{
                flag:'my-hello' //初始化flag为my-hello组件ID
            },
            components:{ //两个组件并列
                'my-hello':{
                    template: "<h3>我是hello组件</h3>",
                },
                'my-world':{
                    template: "<h3>我是world组件</h3>"
                }
            }
        });
    </script>
</body>

结果如下：

我是hello组件 #显示hello组件。我是world组件 #显示 world组件

三、keep-alive组件缓存非活动组件

如果吧切换出去的组件保留在内存中，可以保留他的状态，避免重新渲染，为此可以添加一个keep-alive指令参数。keep-alived也是一个组件：keep-alive

我们先来看一段代码，来演示一下，我们为啥要用keepalived。

<body>
    <div id="box">
        <button @click="flag='my-hello'">显示hello 组件</button>
        <button @click="flag='my-world'">显示world 组件</button>
        <hr>
        <!--:is="组件名" 表示我要显示的组件-->
        <component :is="flag"></component>
    </div>

    <script src="../vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#box",
            data:{
                flag:'my-hello'
            },
            components:{ //两个组件并列
                'my-hello':{
                    template: "<h3>我是hello组件:{{x}}</h3>",
                    data(){
                        return {
                            x:Math.random()
                        }
                    }
                },
                'my-world':{
                    template: "<h3>我是world组件:{{y}}</h3>",
                    data(){
                        return {
                            y:Math.random()
                        }
                    }
                }
            }
        });
    </script>
</body>

查看结果：

第1次点击按钮切换：我是hello组件:0.5740306021136665，我是world组件:0.01709101222845466

第2次点击按钮切换：我是hello组件:0.5976648403218665，我是world组件:0.7666536984682439

从上面的结果就能返现，当我点击 hello 组件就不是当年活动的hello组件了，这个组件已经被销毁了，当你下次切换回来的时候，重新创建hello这个组件，这个在很多时候效率比较低。

所以这个时候我们就要用到keepalive了，其实就在component的外层加上keep-alive组件就行了：

<body>
    <div id="box">
        ....... //省略跟上面一样

        <!--使用keep-alive组件缓存非活动组件，可以保留状态，避免重新渲染，默认每次都会销毁非活动组件并重新创建-->
        <keep-alive>
            <component :is="flag"></component>
        </keep-alive>

    </div>

    <script src="../vue.js"></script>
    <script>
        let vm = new Vue({
           .....
        });
    </script>
</body>

输出结果：

第1次点击按钮切换：我是hello组件:0.5740306021136665，我是world组件:0.01709101222845466

第2次点击按钮切换：我是hello组件:0.5740306021136665，我是world组件:0.01709101222845466

结果输出一样的，从而严重：使用keep-alive组件缓存非活动组件，可以保留状态，避免重新渲染，默认每次都会销毁非活动组件并重新创建

posted @ 2020-03-12 14:33 帅丶高高阅读(278) 评论(0) 收藏举报

刷新页面返回顶部

极其内向的帅小伙