vue单文件组件导入导出

目录分析

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

单文件组件.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模板中必须有一个跟文件

  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue2中,组件导入导出可以通过以下几种方式实现: 1. 使用ES6的模块化语法,通过`export`和`import`关键字进行导出导入。在组件文件中,可以使用`export`关键字将组件导出,然后在需要使用该组件文件中使用`import`关键字进行导入。例如,在index.js文件中,可以使用以下代码将组件导出: ```javascript export { default as ElMain } from "./main"; export { default as Sidebar } from "./sidebar"; export { default as ElHeader } from "./header"; ``` 然后,在需要使用这些组件文件中,可以使用`import`关键字进行导入,例如: ```javascript import { ElMain, Sidebar, ElHeader } from "./components"; ``` 2. 使用Vue文件组件(.vue文件),在文件组件中可以直接导入其他组件。例如,在index.vue文件中,可以使用以下代码导入自定义的组件: ```html <template> <el-container> <el-aside width="200px"> <!-- 左侧导航 --> <Sidebar></Sidebar> </el-aside> <el-container> <!-- 右侧头部 --> <el-header> <ElHeader></ElHeader> </el-header> <!-- 右侧主体 --> <ElMain></ElMain> </el-container> </el-container> </template> ``` 在这个例子中,`Sidebar`、`ElHeader`和`ElMain`都是自定义的组件,存放在components文件夹中。可以直接在模板中使用这些组件,无需进行额外的导入操作。 总结起来,Vue2中的组件导入导出可以通过ES6的模块化语法进行,也可以直接在文件组件导入其他组件。 #### 引用[.reference_title] - *1* *2* *3* [vue组件导入的方式](https://blog.csdn.net/weixin_41654160/article/details/118653612)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值