component -- is 动态切换组件

最新推荐文章于 2024-04-10 21:21:27 发布

xueyue616

最新推荐文章于 2024-04-10 21:21:27 发布

阅读量2.6k

点赞数

分类专栏： Vue框架文章标签： vue.js

原文链接：https://www.kancloud.cn/cyyspring/vuejs/936922

版权

Vue框架专栏收录该内容

19 篇文章 1 订阅

订阅专栏

component -- is 切换组件

1.有的时候，在不同组件之间进行动态切换，有两种方法一种使用v-if 或者v-show
来控制组件之间的显示切换
2.另外一种配合component标签和v-bind 搭配is使用例如：
    <component v-bind:is="切换组件的名"></component>
3.简单的说:
    <component> 元素，动态地绑定多个组件到它的 is 属性
    <keep-alive> 保留状态，避免重新渲染

官方案例地址

案例 -选择不同radio展示不同组件

1.component 每次只能显示一个组件，组件之间切换的时候就是销毁之前的组件
，重建新的组件这样会浪费性能
2.想查看上面话中具体的代码效果，可以在组件中加入声明周期钩子，断点来看
3.详解解决这类问题使用<keep-alive></keep-alive> 来解决例如下面案例可以写成：
<keep-alive>
    <component :is="tab"></component>
</keep-alive>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="radio" v-model="tab" value="myCom1">组件一号
    <input type="radio" v-model="tab" value="myCom2">组件二号
    <!--等号左边是子组件，右边是父组件，因此tab是父组件的data，通过改变来切换组件-->
    <component :is="tab"></component>
</div>

<template id="com1">
    <p> {{title}}</p>
</template>

<template id="com2">
    <p> {{title}}</p>
</template>

<script>
    let myCom1 = {
        template:'#com1',
        data(){
            return {
                title:'子组件一号',
            }
        },
    };
    let myCom2 = {
        template:'#com2',
        data(){
            return {
                title:'子组件二号',
            }
        },
    };
    var vm = new Vue({
        el: '#app',
        data:{
          tab:"myCom1"
        },
        components:{
            myCom1,
            myCom2,
        }
    });
</script>
</body>
</html>

案例二

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examples</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
    <script src="lib/vue.js"></script>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        html, body {
            width: 100%;
            height: 100%;
        }

        footer ul {
            display: flex;
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 40px;
        }

        ul li {
            flex: 1;
            text-align: center;
            list-style: none;
            height: 40px;
            line-height: 40px;
            background: gray;
        }
    </style>
</head>
<body>
<div id="app">
    <keep-alive>
        <component :is="who"></component>
    </keep-alive>
    <footer>
        <ul>
            <li><a @click="who='first'">首页</a></li>
            <li><a @click="who='second'">中间页</a></li>
            <li><a @click="who='third'">尾页</a></li>
        </ul>
    </footer>
</div>

<template id="first">
    <div>
        首页<input>
    </div>
</template>


<template id="second">
    <div>
        中间页
    </div>
</template>

<template id="third">
    <div>
        尾页
    </div>
</template>


<script type="text/javascript">

    var first = {
        template: "#first",
        methods: {}
    }

    var second = {
        template: "#second",
        methods: {}
    }
    var third = {
        template: "#third",
        methods: {}
    }
    var vm = new Vue({
        el: "#app",
        data: {
            who: 'first'
        },
        components: {
            first,
            second,
            third,
        }

    })
</script>
</body>
</html>

xueyue616

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
component -- is 动态切换组件

component -- is 切换组件1.有的时候，在不同组件之间进行动态切换，有两种方法一种使用v-if 或者v-show来控制组件之间的显示切换2.另外一种配合component标签和v-bind 搭配is使用例如： <component v-bind:is="切换组件的名"></component>3.简单的说: <compon...
复制链接

扫一扫