vue学习 --- 第九天 组件化 – 额外知识补充

目录：

1、组件的生命周期

2、组件中的ref引用

3、动态组件的使用

4、keep-alive组件

6、组件的v-model

5 异步组件的使用

7、组件的混入Mixin

 

 

一、组件的生命周期

 v-if是会进行组件卸载的、销毁，true的时候就是组件创建

 created生命周期时是获取不到dom的，从mounted的时候才能获取dom

 

二、组件中的ref引用（使用的比较少，除非必须获取原生dom，否则不建议使用）

vue里面不需要用到queryselector来获取dom元素，ref获取的元素可以当成原生获取的。这个方法也是可以获取组件实例的。

问题：父组件获取子组件的实例后能干嘛？

可以在父组件里面调用子组件的方法和获取子组件里面的子元素或根。（vue2里面的组件只能有一个根元素，vue3里面的组件允许多个根元素；但是只建议使用一个根。）

 

 

使用方法：

 

 

 

 

 

三、动态组件的使用（vue内置组件）

使用方法：

通过改变currentindex来控制

 

 

 

四、keep-alive组件

配合动态组件使用效果好

注意：

1、include、exclude、max等号取的名字一定要是组件的name，不能是你父组件引入的组件自定义名字。

 

 

 想要监听keepalive组件什么时候切出去和切进来，就得用下面的方法activated

 

五、异步组件的使用

第三方库都交供应商

分包的原因是，防止用户在进入页面的时候发生白屏很久的情况，因为这时候在下载很多文件，其中有一些是暂时用不到的文件。如果使用分包的方法的话可以加快浏览器加载速度，用户体验变好。

这里面可以分包文件，也可以分包组件。

 

异步组件使用的比较少，一般都去用路由懒加载去了

 上图是分包utils里面的某个hook函数。

 

 注意异步组件使用方法

 

六、组件的v-model

作用是可以从子组件修改父组件的data的某个变量：

（父组件）

（子组件）

 组件v-model做到两件事情：（1）props给子组件传值（2）直接做好子组件向父组件发送emit的@事件。

注意：（1）父组件传值给子组件，子组件接收方法和props的一样

（2）子组件向父组件传值的方法有限制，得用 this.$emit（update：父组件传的值的名称，参数）

（3）父组件可以自定义传多个值的名字，子组件emit时候必须按父组件给的值名称发送事件和参数。

 

七、组件的混入Mixin

使用方法：

创建一个mixin文件，里面放置一个js文件，文件的内容写法如下图的sayHello.js，

其他文件需要使用mixin的内容时，在script里面import引入文件，然后在export  default里面写mixins：[  ]就可以了。 

其他文件里面一样可以使用data、methods等的options api ，mixin里的内容会自动合并（混入）到你引入的文件里面的相应option api中。