vue--8.组件传值(provide--inject)、动态组件、缓存组件keep-alive、异步组件

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

目录

文章目录

1.中央事件总线bus

2.组件传值(provide--inject)

3.动态组件

4.缓存组件keep-alive

5.异步组件

---

---

1.中央事件总线bus

        通过创建一个新的vm对象,专门统一注册事件,供所有组件共同操作,达到所有组件随意隔代传值的效果

示例应用如下：        

(1)第一种方法：

 

 

 

 （2）第二种方法：需要在main.js去配置

2.组件传值(provide--inject)

示例应用如下：

 

 

3.动态组件

component 标签的 is属性语法：is后跟组件的变量名决定使用哪个组件来渲染

<component is="Sinabox"></component> ==> <Sinabox/>

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

注意: is是组件名 :is是data中的变量中保存的组件名

动态组件示例应用如下：

然后对另外三个盒子进行页面设计即可。

4.缓存组件keep-alive

有时候我们希望在A组件时用户做了一些操作，切换B组件时做了一些操作，当切回A组件时希望记住A的操作，不要重新创建A组件，keep-alive可以缓存动态切换的组件

keep-alive的属性：

max:最多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。(缓存最近被渲染过的组件)

 当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

缓存组件keep-alive的示例应用如下：

（1）主页面

（2）子页面

 

5.异步组件

异步加载并缓存组件：

1、 异步加载组件：用不到的组件不会加载，因此网页打开速度会很快，当你用到这个组件的时候，才会通过异步请求进行加载；

官方解释：Vue允许将组件定义为一个异步解析（加载）组件定义的工厂函数，即Vue只在实际需要渲染组件时，才会触发调用工厂函数，并且将结果缓存起来，用于将来再次渲染。

2、 组件缓存起来：通过异步加载的组件会缓存起来，当你下一次再用到这个组件时，丝毫不会有任何的疑迟，组件很快会从缓存中加载出来。

异步的方法一：

 异步的方法二：

 异步的方法三：

 三种方法的示例应用如下：