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();//同时也可以调用子组件中的属性
vue自定义组件并使用的更多相关文章
- vue自定义组件(vue.use(),install)+全局组件+局部组件
相信大家都用过element-ui.mintui.iview等诸如此类的组件库,具体用法请参考:https://www.cnblogs.com/wangtong111/p/11522520.html ...
- Vue自定义组件实现v-model指令
Tips: 本文所描述的Vue均默认是Vue2版本 在我们初次接触Vue的时候,一定会了解到一个语法糖,那就是v-model指令,它带给我们的第一印象就是它可以实现双向绑定 那么,什么是双向绑定?通俗 ...
- [转] vue自定义组件(通过Vue.use()来使用)即install的使用
在vue项目中,我们可以自定义组件,像element-ui一样使用Vue.use()方法来使用,具体实现方法: 1.首先新建一个Cmponent.vue文件 // Cmponent.vue<te ...
- vue 自定义组件销毁
今天在开发电商vue前端项目时,用户每次登出再换其它用户登录时,页面显示的用户名和左则导航都还是上个用户的,刚开始以为是localStorage中没有清除全局数据,然后在用户点击退出系统时手动清除lo ...
- Vue自定义组件插入值
我们自定义组件的时候有时候需要往组件里面插一些内容: //定义一个组件test,插值内容用slog来代替 export default { name: 'test', template:` <d ...
- VUE 自定义组件之间的相互通信
一.自定义组件 1.全局自定义组件 我们在var vm = new Vue({});的上面并列写上Vue.component('自定义组件名',{组件对象});来完成全局自定义组件的声明.示例代码如下 ...
- vue自定义组件中的v-model简单解释
在使用iview框架的时候,经常会看到组件用v-model双向绑定数据,与传统步骤父组件通过props传值子组件,子组件发送$emit来修改值相比,这种方式避免操作子组件的同时再操作父组件,显得子组件 ...
- 8、VUE自定义组件
1.为什么要使用自定义组件? 自定义组件是用来封装复杂的内容,提高可重用性,比如封装复杂的表格组件.日历组件.图片轮播组件等. 2.自定义组件 2.1. 全局组件 全局组件是每个Vue对象都能使用的组 ...
- Vue自定义组件以及组件通信的几种方式
本帖子来源:小贤笔记 功能 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它 ...
随机推荐
- ROPI下载安装
ROPI下载安装 官方地址 参考文献 安装过程 wget http://num.math.uni-goettingen.de/~m.goerigk/ropi/0.1.0/ropi-0.1.0.tar. ...
- 2019-03-28 SQL Server char/nchar/nvarchar
带n 的是用于处理unicode 字符,即处理中英文的字符 一般来说,如果含有中文字符,用nchar/nvarchar,如果纯英文和数字,用char/varchar char 定长 char(10), ...
- keepalived安装实现nginx主备高可用
. keepalived安装环境 su - root yum -y install kernel-devel* yum -y install openssl-* yum -y install popt ...
- Vijos—— T 1359 Superprime
https://vijos.org/p/1359 描述 农民约翰的母牛总是生产出最好的肋骨.你能通过农民约翰和美国农业部标记在每根肋骨上的数字认出它们. 农民约翰确定他卖给买方的是真正的质数肋骨,是因 ...
- Android数据库高手秘籍:SQLite命令
要想熟练地操作任何一个数据库,最最基本的要求就是要懂SQL语言,这也是每个程序员都应该掌握的技能.虽说SQL博大精深,要想精通确实很难,但最基本的一些建表命令,增删改查,大家还是必须要学会的. SQL ...
- 数据库SQL Server2012笔记(三)——表的复杂查询
1.数据分组--max/min/avg/sum/count select avg(字段名),sum(字段名) from 表名 select count(*) from 表名 select ...
- Java 零基础跑起第一个程序
Java 零基础跑起第一个程序 一 概述 1 java代码编译 编译后才干在计算机中执行.编译就是把人能看懂的代码转换成机器能看懂的形式 2 java的长处 一次编译.到处执行.由于java代码是在 ...
- 2015.04.21,外语,读书笔记-《Word Power Made Easy》 11 “如何辱骂敌人” SESSION 31
1.no reverence iconoclast([ai'kɔnәklæst] n. 毁坏宗教神像的人, 提倡打破旧习的人)藐视传统.在青年的反叛期很容易出现iconoclasm([ai'kɔnә ...
- nyoj--114--某种序列(滚动数组)
某种序列 时间限制:3000 ms | 内存限制:65535 KB 难度:4 描述 数列A满足An = An-1 + An-2 + An-3, n >= 3 编写程序,给定A0, A1 和 ...
- springmvc生成注册验证码
通过SPRing MVC为系统添加验证码 1:布局登陆页面,用户名,密码,填写验证码的文本框,及验证码的图片及点击换图 <%@ taglib prefix="c" uri=& ...