Vue.js动态组件解析

Vue.js

此前的Vue.js系列文章：

• Vue.js开发常见问题解析
• Vue.js常用开发知识简要入门（一）
• Vue.js常用开发知识简要入门（二）
• Vue.js常用开发知识简要入门（三）

什么是动态组件绑定？简单的说，就是几个组件放在一个挂载点下，然后根据父组件的某个变量来决定显示哪个，或者都不显示。

is属性

在挂载点使用component标签，然后使用v-bind:is="组件名"，会自动去找匹配的组件名，如果没有，则不显示；改变挂载的组件，只需要修改is指令的值即可。
HTML：

    fast  
    bus  
    business        

JS：

//创建根实例new Vue({  el: "#example",  data: {    currentView: 'bus'  },  components: {    fast: {template: '
滴滴快车
'},    bus: {template: '
滴滴巴士
'},    business: {template: '
滴滴专车
'}  }});

通过is属性绑定的vm.currentView变量值，控制展示的组件

didi.gif

keep-alive

简单来说，被切换掉（非当前显示）的组件，是直接被移除了。如果把切换出去的组件保留在内存中，则可以保留它的状态或避免重新渲染。为此，可以添加一个keep-alive指令参数。

Vue.js为其组件设计了一个keep-alive特性，如果这个特性存在，那么在组件被重复创建时，会通过缓存机制快速创建组件，以提升视图更新性能。

activate钩子

简单来说，他是延迟加载。 例如，在发起ajax请求时，会需要等待一些时间，假如我们需要在ajax请求完成后，再进行加载，那么就需要用到activate钩子了。

具体用法来说，activate是和template、data等属性平级的一个属性，形式是一个函数，函数里默认有一个参数，而这个参数是一个函数，执行这个函数时，才会切换组件。

Vue.component('activate-example', {
    activate(done) {
        let _this = this;
        loadDataAsync(function(data) {
            _this.someData = data;
            done();
        });
    }
});

activate钩子只作用于动态组件切换或静态组件初始化渲染的过程中，不作用于使用实例方法手工插入的过程中。

---

参考：

• Vue.js动态组件解析
• 《Vue.js权威指南》

---

++++++++++本人出售本人出售《Vue.js权威指南》，二手价20元！++++++++++

Vue.js权威指南