vue自定义组件并使用
以下是使用自己写的一个简单的文件上传框为例
1、自定义组件结构(一个js文件,一个vue文件),最好单独放一个文件
2、upload.vue 内容
其中,action是父组件传递给子组件的参数,使用props进行接收,并关联到action中。
props 父级传给组件的数据 然后用 $emit('方法名',数据) 返回父级数据
3、index.js内容
index.js的内容分成3个步骤(缺一不可):
a)、引入vue组件
b)、进行全局安装
c)、导出组件
其中,const 定义的组件名称(uploadSimple)需要等于组件初始化的时候Vue.component中定义的key名称。
以上是完成一个子组件定义。
接下来进行组件的使用
4、在main.js文件中,导入自定义的组件,并进行Vue.use()
5、在需要使用该组件的地方进行调用
其中,:actionUrl='actionUrl'中的actionUrl值,在data中进行定义即可
父组件调用子组件的方法:
在父组件中引用子组件并定义ref
<
v-food
ref="selectfood"></
v-food
>
调用定义在子组件中的方法show
this.$refs.selectfood.show();//同时也可以调用子组件中的属性
转载于:https://www.cnblogs.com/luoxuemei/p/9289897.html
vue自定义组件并使用相关推荐
- vue自定义组件,插槽,自定义事件
vue组件套娃 1. vue自定义组件 2. 组件和插槽套娃 3. vue组件通过自定义事件更改vue实例中的数据 1. vue自定义组件 语法 Vue.component('自定义组件名', {pr ...
- vue 嵌套表格组件_使用form-create动态生成vue自定义组件和嵌套表单组件
使用form-create动态生成vue自定义组件和嵌套表单组件 maker.create 通过建立一个虚拟 DOM的方式生成自定义组件 生成 Maker let rule = [ formCreat ...
- vue自定义组件是.vue还是html,Vue自定义组件的四种方式示例详解
四种组件定义方式都存在以下共性(血泪史) 规则: 1.组件只能有一个根标签 2.记住两个词全局和局部 3.组件名称命名中'-小写字母'相当于大写英文字母(hello-com 相当于 helloCom) ...
- Vue自定义组件封装及使用Excel
Vue自定义组件封装及使用Excel 一.js-xlsx 组件安装 二. 创建vue组件 三.使用 四.效果图 一.js-xlsx 组件安装 npm install xlsx --savenpm in ...
- Vue自定义组件之时间跨度选择器
时间跨度选择器 该组件是个时间跨度选择器. 基于 vue自定义组件之选择器 和 Vue自定义组件之日期时间范围选择器 点击选框,下拉列表中有四个选项,点击自定义时间,后边会出现 日期时间范围选择 代码 ...
- Vue自定义组件npm上传私服,且从私服下载使用
Vue自定义组件npm上传私服,yarn私服下载使用 安装镜像源管理工具nrm 发布自定义组件到公司私服 若未下载nrm源管理工具直接使用npm设置私服地址也可以 以下步骤都是基于npm命令 从私服下 ...
- Vue自定义组件及组件传值
vue自定义组件: 1.在src中components中,新建文件,后缀名为.vue组件(首字母建议大写)例如:Weekly.vue 2.Weekly.vue: 3.在app.vue中引用组件: js ...
- vue 自定义组件双向数据绑定
文章目录 序 属性&事件传值双向绑定 v-model组件双向绑定 .sync修饰符双向绑定 总结 !!!这边文章记录的是 vue2 的概念,vue3 对双向绑定进行了改动,不要把一下代码放到 ...
- vue自定义组件-文件上传后端接口
学习目标: vue自定义组件-文件上传后端接口 学习内容: 准备工作: 后端环境:JAVA-Springboot项目数据库表(这里使用psql数据库):sys_file_record保存上传文件的信息 ...
- Vue自定义组件 Vue.component
Vue.component Vue自定义组件(1) 如果有朋友对Vue基础还不够了解的可以先看下官方的教程 http://doc.vue-js.com/v2/guide/ 这个是官方的网址,官方的教 ...
最新文章
- html页面正则表达式,使用正则表达式计算HTML页面标记
- 前端实习生笔试_一道来自美图的实习生前端笔试算法题
- 数学建模学习笔记——时间序列分析
- Leaflet中加载Geoserver发布的WMS服务显示地图
- 32 位和 64 位 OS 下的各种数据类型的大小
- 如何在AWS搭建服务器控制服务器
- 综合示例:自动生成一组新闻
- SCAU 算法课的题
- CI框架下nginx重写规则
- Redis基础学习(四)—Redis的持久化
- AMESim找图形平衡点的方法
- 的级联选择_OpenCV-Python 级联分类器 | 六十二
- China Pub 高清书籍6CD 包含的图书目录
- # Idea,2.5,软件安装,提示If you already have a 64-bit JDK installed ,defined a JAVA_HOME variable in Compu
- Charles安装SSL证书失败问题
- 盘点那些年火过的php建站系统
- 使用阿里巴巴的iconfont图片库(下载到本地)
- 视觉欺骗:你绝不会相信A和B颜色相同!
- matplotlib系列-plt.axis
- oracle雾化试图_ORACLE物化视图具体解释