本文是在官方文档的基础上,更加细致的说明,代码更多更全。 简单来说,更适合新手阅读
①简单来说:
就是几个组件放在一个挂载点下,然后根据父组件的某个变量来决定显示哪个,或者都不显示。
②动态切换:
在挂载点使用component标签,然后使用v-bind:is=”组件名”,会自动去找匹配的组件名,如果没有,则不显示;
改变挂载的组件,只需要修改is指令的值即可。
如示例代码:
本文是在官方文档的基础上,更加细致的说明,代码更多更全。 简单来说,更适合新手阅读
就是几个组件放在一个挂载点下,然后根据父组件的某个变量来决定显示哪个,或者都不显示。
②动态切换:
在挂载点使用component标签,然后使用v-bind:is=”组件名”,会自动去找匹配的组件名,如果没有,则不显示;
改变挂载的组件,只需要修改is指令的值即可。
如示例代码:
点击父组件的按钮,会自动切换显示某一个子组件(根据which_to_show这个变量的值来决定)。
简单来说,被切换掉(非当前显示)的组件,是直接被移除了。
在父组件中查看this.$children属性,可以发现,当子组件存在时,该属性的length为1,而子组件不存在时,该属性的length是0(无法获取到子组件);
假如需要子组件在切换后,依然需要他保留在内存中,避免下次出现的时候重新渲染。那么就应该在component标签中添加keep-alive属性。
如代码:
说明:
初始情况下,vm.$children属性中只有一个元素(first组件),点击按钮切换后,vm.$children属性中有两个元素,再次切换后,则有三个元素(三个子组件都保留在内存中)。
之后无论如何切换,将一直保持有三个元素。
简单来说,他是延迟加载。
例如,在发起ajax请求时,会需要等待一些时间,假如我们需要在ajax请求完成后,再进行加载,那么就需要用到activate钩子了。
具体用法来说,activate是和template、data等属性平级的一个属性,形式是一个函数,函数里默认有一个参数,而这个参数是一个函数,执行这个函数时,才会切换组件。
为了证明他的延迟加载性,在服务器端我设置当发起某个ajax请求时,会延迟2秒才返回内容,因此,第一次切换组件2时,需要等待2秒才会成功切换:
代码效果:
【1】第一次切换到组件2时,需要等待2秒后才能显示(因为发起ajax);
【2】在有keep-alive的情况下,第二次或之后切换到组件2时,无需等待;但ajax内容,需要在第一次发起ajax两秒后才会显示;
【3】在无keep-alive的情况下(切换掉后没有保存在内存中),第二次切换到组件2时,依然需要等待。
【4】等待时,不影响再次切换(即等待组件2的时候,再次点击切换,可以直接切换到组件3);
说明:
【1】只有在第一次渲染组件时,才会执行activate,且该函数只会执行一次(在第一次组件出现的时候延迟组件出现)
【2】没有keep-alive时,每次切换组件出现都是重新渲染(因为之前隐藏时执行了destroy过程),因此会执行activate方法。
简单来说,动态组件切换时,让其出现动画效果。(还记不记得在过渡那一节的说明,过渡适用于动态组件)
默认是进入和退出一起完成;(可能造成进入的内容出现在退出内容的下方,这个下方指y轴方面偏下的,等退出完毕后,进入的才会出现在正确的位置);
transition-mode=”out-in”时,动画是先出后进; transition-mode=”in-out”时,动画是先进后出(同默认情况容易出现的问题);
示例代码:(使用自定义过渡名和animate.css文件)
本文已被整理到了《》,欢迎大家学习阅读。
关于vue.js组件的教程,请大家点击专题进行学习。