比如我们现在想要实现了一个功能:
点击一个tab-bar,切换不同的组件显示;
我们可以通过两种不同的实现思路来实现:
方式一:通过v-if来判断,显示不同的组件;
方式二:动态组件的方式;
1. v-if显示不同的组件
我们可以先通过v-if来判断显示不同的组件,这个可以使用我们之前讲过的知识来实现:
2. 动态组件的实现
动态组件是使用 component 组件,通过一个特殊的attribute is 来实现:
这个currentTab的值需要是什么内容呢?
可以是通过component函数注册的组件;
在一个组件对象的components对象中注册的组件;
3. 动态组件的传值
如果是动态组件我们可以给它们传值和监听事件吗?
也是一样的;
只是我们需要将属性和监听事件放到component上来使用;
4. keep-alive属性
keep-alive有一些属性:
include - string | RegExp | Array。只有名称匹配的组件会被缓存;
exclude - string | RegExp | Array。任何名称匹配的组件都不会被缓存;
max - number | string。最多可以缓存多少组件实例,一旦达到这个数字,那么缓存组件中最近没有被访问的实例会被销毁;
include 和 exclude prop 允许组件有条件地缓存:
二者都可以用逗号分隔字符串、正则表达式或一个数组来表示;
匹配首先检查组件自身的 name 选项;
5. 缓存组件的生命周期
对于缓存的组件来说,再次进入时,我们是不会执行created或者mounted等生命周期函数的:
但是有时候我们确实希望监听到何时重新进入到了组件,何时离开了组件;
这个时候我们可以使用activated 和 deactivated 这两个生命周期钩子函数来监听;