目录分析

打开项目,依次分析下目录结构,项目目录结构如下
在这里插入图片描述
在这里插入图片描述
项目目录结构如下
在这里插入图片描述
在这里插入图片描述

单文件组件.vue

目完成后,我们看到src 目录下有一个componets 目录,里面有一个 HelloWorld.vue 文件(单文件组件),内容如下

(1)template模板—作用:定义展示模板信息
在这里插入图片描述
(2)script 标签—作用:导出组件模块
script中都是js 代码,它定义这个组件中所需要的数据和及其操作

在.vue文件中,export default 后面的对象 就相当于 new Vue() 构造函数中的接受的对象,包含组件数据(data), 方法methods等。
这时可以看到,export default 后面的对象和new Vue() 构造函数中接受的对象是一模一样的。但要注意data 的书写方式不同。在 .vue 组件中data 必须是一个函数,且需要将数据对象return出来,供组件实现。
在这里插入图片描述
(3)style样式表—作用:定义组件模板样式
style主要是定义这个组件的样式,scoped(作用域)表明这里写的css 样式只适用于该组件,可以限定css样式的作用域。
在这里插入图片描述

组件导出导出

组件导出
export是ES6的语法,后面的变量可以作为出口传出,在另外的文件里通过 import 接受这个变量并使用,default导出的方式不需要知道变量的名字, 相当于是匿名的, 直接把开发的接口给export
在组件模块中,只能使用export default向外暴露一次
在这里插入图片描述
组件导出—name属性
组件导出时可以加name属性(可选),不加name属性或者为空时默认为组件文件名(大驼峰格式)
在这里插入图片描述
在这里插入图片描述
组件模块的导入读取可以通过两种方式:
在这里插入图片描述
组件导入步骤
(1)在基础组件文件夹下新建单文件组件BannerComponent.vue
在这里插入图片描述在这里插入图片描述
(2)设置轮播图组件模块的数据、方法、样式,并导出
在这里插入图片描述
在这里插入图片描述
(3)在根组件App.vue通过import…from…导入
在这里插入图片描述
(4)组件选项引入:导入成功后,组件在模板的使用需要通过components选项
在这里插入图片描述
(5)引用组件:最后组件元素想显示到页面上,需要在HTML中引用组件标签,之后便组件模块引入使用完毕。(标签对也可单标签)
在这里插入图片描述
在这里插入图片描述
通过以上步骤便可以在页面中实现组件的导出和导入使用

(1)export default导出
(2)import … from …导入
(3)components组件选项命名引入
(4)template模板通过标签引用
注意事项:template模板中必须有一个跟文件

Logo

前往低代码交流专区

更多推荐