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模板中必须有一个跟文件
vue单文件组件导入导出相关推荐
- Vue 单文件组件||Vue 单文件组件的基本用法||webpack 中配置 vue 组件的加载器|| 在 webpack 项目中使用 vue
Vue 单文件组件 传统组件的问题和解决方案 1. 问题 1. 全局定义的组件必须保证组件的名称不重复 2. 字符串模板缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \ 3. 不支持 CS ...
- Vue单文件组件与vue-loader
单文件组件 Vue.js是一个渐进式的js框架,在使用wewbpack构建Vue项目时,可以使用一种新的构建模式: .vue单文件组件. 就是一个后缀名为.vue的文件,在webpack中使用vue- ...
- vue单文件props写法_详解Vue 单文件组件的三种写法
详解Vue 单文件组件的三种写法 JS构造选项写法 export defaul { data, methods, ...} JS class写法 @Component export default c ...
- 在Vue单文件组件的template标签上使用v-if不生效的原因
今天晚上,我在某个组件里看到了这样一段代码,简化来讲,大概长这样: // Child.vue <template v-if="false"><div>Foo ...
- 什么Vue单文件组件(SFC)?
介绍# Vue 的单文件组件 (即 *.vue 文件,英文 Single-File Component,简称 SFC) 是一种特殊的文件格式,使我们能够将一个 Vue 组件的模板.逻辑与样式封装在单个 ...
- Vue单文件组件的使用
项目搭建完成后需要分别对 main.js , index.html , App.vue 文件进行编写代码 index.html <!DOCTYPE html> <html lang= ...
- Vue单文件组件环境配置
单文件组件不能直接运行使用,需要依赖node项目对其进行解析打包,在使用之前需要先进行环境配置 安装node版本管理工具nvm curl -o- https://raw.githubuserconte ...
- Vue单文件组件基础模板
背景 相信大家在使用Vue开发项目时,基本都是以单文件组件的形式开发组件的,这种方式好处多多: 1.代码集中,便于开发.管理和维护 2.可复用性高,直接将vue文件拷贝到新项目中 我暂时就想到这两点, ...
- 【视频】vue单文件组件vue-cli
P13vue单文件组件vue-cli https://www.bilibili.com/video/av91679349?p=13
最新文章
- dedecms vdimgck.php,织梦dedecms后台验证码图片不显示解决方案
- Android之自定义瀑布流式的标签列表
- Python学习笔记:Day 10 用户注册和登陆
- Python 基础知识(二)
- python 下载文件-python实现下载文件的三种方法_python
- android显示当前时间
- 如何从PDF文件中提取几页为一个PDF文件?
- 智慧城市智能交通系统建议方案
- 【OpenCV】Chapter7.图像噪声与滤波器
- 计算机病毒查杀记录,如何看eset nod32防病毒查杀历史记录?
- 威廉玛丽学院计算机教授刘旭,国家超级计算济南中心,欢迎您!
- 上门洗车App 竟然是块大肥肉!
- ios开发学习--按钮(Button)效果源码分享--系列教程3
- 野指针的成因_C语言
- j3455安装linux 4k驱动,nas-j3455kvm安装win10及集成显卡直通
- 一文让你读懂什么是智慧数字经营
- PTA L3-008 喊山 (BFS)
- Python 爬虫实战:分析豆瓣中最新电影的影评(词云显示)
- 2022寒假day2
- 区块链软件开发NFT平台开发移动APP开发预约预定APP定制开发