什么是组件
首先明白什么是组件,我这里用一些大白话说一下,我们可以把组件相当于一个小的完整的页面,当有多个组件的时候就可以进行拼接,可以看一下网易云网站,看我下面的图
我用红色框圈就可以看成一个组件,多个组件拼接成一个大的页面.这么说大致应该能明白了.
知道了什么是组件,那么我们就接着学习.还是看上面的图我们要想拼成一个完整的页面,就需要一个大的容器来装这些组件.我们在目录结构中,有App.vue这个文件,这个是根组件,我们可以让它当成一个大的容器,把那些组件在这个容器中进行拼装.要进行拼装首先要进行注册,注册分为两种,一种是局部注册,另外一种是全局注册.下面我们先来说局部注册
局部注册
局部注册其实很简单,首先就是进行导入,把组件导入到根组件中,就是用import进行导入.
其中有一个轮播图案例,我想展示多个,可以在App.vue中这么写
html
import LBT from './轮播图.vue'
<LBT/>
<LBT/>这样就完成了.我们可以在页面上看到两个轮播图.
这里只是讲语法,不会举一个页面很漂亮的例子,知道是这么回事就行了.
全局注册
所谓的全局注册,就是全局都可以用,首先还是导入用import不过这个导入是在main.js这个文件中导入的.导入之后,就要注册这个组件,就是调用app.component()这个方法,里面传入导入的对象.然后这个组件在可以随便使用,不同组件之间也可以相互使用.可以看下面这张图片:
组件的生命周期
组件的生命周期有4部:创建,挂载,更新,卸载.
创建前没有什么好说的,我们在这个过程中操作不了什么,然后就是创建后我们就可以操作数据了,挂载前也没啥可说的,不能操作DOM,挂载后是可以操作DOM的.然后就是更新前和更新后,这里就很好理解了,更新前拿到的是更新前的值,更新后拿到最新的数据.还有就是卸载,这里只有卸载后,卸载后要做哪些操作.
然后这些阶段都对应了一些钩子函数,至于为什么叫钩子函数,记住就行.这里主要说一下创建后挂载后,和更新阶段,还有卸载后.
直接看图片,这张图片是Vue2和Vue3钩子函数的对比
文章就不加案例了,如果想要看代码,可以让ai生成.