nuxt自定义布局页
在根目录下创建layouts(文件名必须是layouts)文件夹,在layouts文件夹下新建defult.vue文件(默认自定义布局页的模板)。default文件里要写一个<slot />,插槽就是用来放自定义的组件的。
接下来去写自定义的组件。在pages目录下新建一个vue文件(jsls.vue),自定义的内容需要用NuxtLayout标签包裹。
运行后的页面内容如下图
每一个插槽可以放一个组件也就是一个页面,在自定义模板中可以放置多个组件,也就是可以写多个slot,只要给每一个slot取上名字就可实现在页面内展示多个组件。
自定义内容需要用template标签包裹并给一个#后面带上插槽的名字。
运行后的页面效果如下图
组件编写
nuxt3的组件必须写在components文件夹下面。
首先在根目录下新建components文件夹,在components文件夹里新建文件,例如头部组件。新建Header.vue文件。
在index.vue文件里引入这个组件。
运行后的页面效果如下图。(有可能会报错,可以在终端内重新跑一下项目)
也可以在布局模板里面使用组件,使用的方法和上面的方法一样。在defult.vue文件里面引用Header组件。
运行后的页面效果。
多层级组件
创建多层级组件。在components目录下创建一个test文件夹,test文件夹内创建自定义组件文件,例如按钮。
在test目录下新建MyButton文件
多层级组件在页面内的引用与上面的组件引用方法一致,不过多层级组件在引用时需要加上文件名。
运行后的页面效果如下图
组件懒加载
页面有很多内容,需要过一段时间再显示或者组件有时候显示有时候不显示的时候就可以使用组件懒加载。
在components目录下新建LazyLoad.vue文件。
组件懒加载可以和v-if一起使用。