动态组件：

1、定义：

几个组件放在同一个挂载点下，然后根据父组件的某个变量来决定显示哪个，或者都不显示。

2、动态切换原理：

在挂载点使用<component>标签，然后使用v-bind:is=”组件名”，会自动去找匹配的组件名，如果没有，则不显示；

改变挂载的组件，只需要修改is指令的值即可。

如示例代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue动态组件</title>

<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>

</head>

<body>

<div id="app">

    <button @click="toshow">点击让子组件显示</button>

    <component v-bind:is="which_to_show"></component>

</div>

<script>

    var vm = new Vue({

        el: '#app',

        data: {

            which_to_show: "first"

        },

        methods: {

            toshow: function () {   //切换组件显示

                var arr = ["first", "second", "third"];

                var index = arr.indexOf(this.which_to_show);

                if (index < 2) {

                    this.which_to_show = arr[index + 1];

                } else {

                    this.which_to_show = arr[0];

                }

            }

        },

        components: {

            first: { //第一个子组件

                template: "<div>这里是子组件1</div>"

            },

            second: { //第二个子组件

                template: "<div>这里是子组件2</div>"

            },

            third: { //第三个子组件

                template: "<div>这里是子组件3</div>"

            },

        }

    });

</script>

</body>

</html>

注：点击父组件的按钮，会自动切换显示某一个子组件（根据which_to_show这个变量的值来决定）。

3、keep-alive

简单来说，被切换掉（非当前显示）的组件，是直接被移除了。

在父组件中查看this.$children属性，可以发现，当子组件存在时，该属性的length为1，而子组件不存在时，该属性的length是0（无法获取到子组件）；

假如需要子组件在切换后，依然需要他保留在内存中，避免下次出现的时候重新渲染。那么就应该在标签中添加keep-alive属性。

如示例代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue动态组件</title>

<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>

</head>

<body>

<div id="app">

    <button @click="toshow">点击让子组件显示</button>

    <component v-bind:is="which_to_show" keep-alive></component>

</div>

<script>

    var vm = new Vue({

        el: '#app',

        data: {

            which_to_show: "first"

        },

        methods: {

            toshow: function () {   //切换组件显示

                var arr = ["first", "second", "third"];

                var index = arr.indexOf(this.which_to_show);

                if (index < 2) {

                    this.which_to_show = arr[index + 1];

                } else {

                    this.which_to_show = arr[0];

                }

            }

        },

        components: {

            first: { //第一个子组件

                template: "<div>这里是子组件1</div>"

            },

            second: { //第二个子组件

                template: "<div>这里是子组件2</div>"

            },

            third: { //第三个子组件

                template: "<div>这里是子组件3</div>"

            },

        }

    });

</script>

</body>

</html>

注：

初始情况下，vm.$children属性中只有一个元素（first组件），

点击按钮切换后，vm.$children属性中有两个元素，再次切换后，则有三个元素（三个子组件都保留在内存中）。之后无论如何切换，将一直保持有三个元素。

版权声明：出处http://blog.csdn.net/qq20004604

Vue.js动态组件的更多相关文章

  1. Vue.js多重组件嵌套

    Vue.js多重组件嵌套 Vue.js中提供了非常棒的组件化思想,组件提高了代码的复用性.今天我们来实现一个形如 <app> <app-header></app-head ...

  2. 【Vue课堂】Vue.js 父子组件之间通信的十种方式

    这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...

  3. 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能

    大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...

  4. Vue.js之组件传值

    Vue.js之组件传值 属性传值可以从父组件到子组件,也可以从子组件到父组件. 这里讲一下从父组件到子组件的传值 还以上次的demo为例,demo里有APP.vue是父组件,Header.vue,Us ...

  5. Vue.js之组件嵌套小demo

    Vue.js之组件嵌套的小demo项目 第一步:初始化一个wabpack项目,这里不在复述.第二步:在components文件夹下新建Header.vue Footer.vue和Users.vue三个 ...

  6. Vue.js之组件嵌套

    Vue.js中组件嵌套有两种方式 第一种:注册全局组件 例如在components文件夹下新建一个User.vue组件,然后在main.js文件中注册全局组件 //注册全局组件 Vue.compone ...

  7. vue.js 同级组件之间的值传递方法(uni-app通用)

    vue.js 兄弟组件之间的值传递方法 https://blog.csdn.net/jingtian678/article/details/81634149

  8. elementUI的动态tabs页的使用，vue的动态组件的操作

    elementUI的动态tabs页的使用,vue的动态组件的操作 有时候我们需要用到动态的tab页,结合不同的页面内容来显示.这里是使用了elementUI的动态tabs页来实现的 <div c ...

  9. Vue.js的组件(slot/动态组件等)、单文件组件、递归组件使用

    一.组件 1> 组件命名方式有两种(注意:在DOM模板中只有kebab-case命名方法才生效): html中引用组件: <!-- 在DOM模板中,只有 kebab-case命名才生效 - ...

随机推荐

  1. Prometheus Node_exporter 之 Network Netstat ICMP

    Network Netstat ICMP /proc/net/snmp 1. ICMP Errors 1 type: GraphUnit: shortLabel: Messages out (-) / ...

  2. 纯js实现页面返回顶部的动画

    啥也不说了,直接上代码 var scrollTop = document.body.scrollTop; document.body.style.marginTop = -scrollTop + 'p ...

  3. EntityFramework Code-First 简易教程（一）

    前言:学习了EF框架这么久,还没有好好总结一番,正好遇到一国外的网站,发现不错,随即翻译过来,一是让自己复习一遍,二是供广大初学者学习,翻译过程中加入了一些自己的理解,如有错误,还请指出,多谢多谢.好 ...

  4. C# 泛型约束 xxx<T> Where T：约束(一)

    泛型约束 代码举例 发现我们游戏的代码中,主程写了很多类似这样的代码: public static T CreateObject<T>(out int objectId) where T ...

  5. Qt分页导航控件

    最近在使用QTableWidget时,因为结果数量比较多而且又有单元格控件,为了改善效率要做分页处理.在网上找了一番,最后在http://www.cppblog.com/biao/archive/20 ...

  6. Balanced Search Trees

    平衡搜索树 前面介绍的二叉搜索树在最坏情况下的性能还是很糟糕,而且我们不能控制操作的顺序,有时根本就不是随机的,我们希望找到有更好性能保证的算法. 2-3 search trees 于是先来了解下 2 ...

  7. 团队作业8--测试与发布（Beta阶段）

    展示博客 一.项目成员: 张慧敏(组长)201421122032 苏晓薇(组员)201421031033 欧阳时康(组员)201421122050 团队仓库: https://git.coding.n ...

  8. React-Native 真机调试踩坑指南

    继上一篇基础安装踩坑继续我们的踩坑之旅,备注一下以下仅针对Mac环境-- 安卓 1.adb 找不到命令? Adb的全称为Android Debug Bridge,就是起到调试桥的作用,真机调试安卓必备 ...

  9. [AHOI2014/JSOI2014]支线剧情

    题目 有源汇上下界最小费用可行流 首先注意到要求是每一条边都经过至少一次,所以对于每一条边我们设成\([1,\infty]\)就好了 另外所有点都能结束剧情,所有点都要向汇点\(t\)连一条\([0, ...

  10. Winfrom 使用WCF 实现双工通讯

    实现双工通讯主要分三步. 通信接口的定义: 被调用接口的实现 双工通道的建立 请先引用DLL(CSDN的代码编辑器真尼玛蛋疼) 整个解决方案的结构 1.通信接口的定义: 服务端调用客户端接口IServ ...