以下是使用自己写的一个简单的文件上传框为例

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自定义组件并使用的更多相关文章

  1. vue自定义组件(vue.use(),install)+全局组件+局部组件

    相信大家都用过element-ui.mintui.iview等诸如此类的组件库,具体用法请参考:https://www.cnblogs.com/wangtong111/p/11522520.html ...

  2. Vue自定义组件实现v-model指令

    Tips: 本文所描述的Vue均默认是Vue2版本 在我们初次接触Vue的时候,一定会了解到一个语法糖,那就是v-model指令,它带给我们的第一印象就是它可以实现双向绑定 那么,什么是双向绑定?通俗 ...

  3. [转] vue自定义组件(通过Vue.use()来使用)即install的使用

    在vue项目中,我们可以自定义组件,像element-ui一样使用Vue.use()方法来使用,具体实现方法: 1.首先新建一个Cmponent.vue文件 // Cmponent.vue<te ...

  4. vue 自定义组件销毁

    今天在开发电商vue前端项目时,用户每次登出再换其它用户登录时,页面显示的用户名和左则导航都还是上个用户的,刚开始以为是localStorage中没有清除全局数据,然后在用户点击退出系统时手动清除lo ...

  5. Vue自定义组件插入值

    我们自定义组件的时候有时候需要往组件里面插一些内容: //定义一个组件test,插值内容用slog来代替 export default { name: 'test', template:` <d ...

  6. VUE 自定义组件之间的相互通信

    一.自定义组件 1.全局自定义组件 我们在var vm = new Vue({});的上面并列写上Vue.component('自定义组件名',{组件对象});来完成全局自定义组件的声明.示例代码如下 ...

  7. vue自定义组件中的v-model简单解释

    在使用iview框架的时候,经常会看到组件用v-model双向绑定数据,与传统步骤父组件通过props传值子组件,子组件发送$emit来修改值相比,这种方式避免操作子组件的同时再操作父组件,显得子组件 ...

  8. 8、VUE自定义组件

    1.为什么要使用自定义组件? 自定义组件是用来封装复杂的内容,提高可重用性,比如封装复杂的表格组件.日历组件.图片轮播组件等. 2.自定义组件 2.1. 全局组件 全局组件是每个Vue对象都能使用的组 ...

  9. Vue自定义组件以及组件通信的几种方式

    本帖子来源:小贤笔记 功能 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它 ...

随机推荐

  1. ROPI下载安装

    ROPI下载安装 官方地址 参考文献 安装过程 wget http://num.math.uni-goettingen.de/~m.goerigk/ropi/0.1.0/ropi-0.1.0.tar. ...

  2. 2019-03-28 SQL Server char/nchar/nvarchar

    带n 的是用于处理unicode 字符,即处理中英文的字符 一般来说,如果含有中文字符,用nchar/nvarchar,如果纯英文和数字,用char/varchar char 定长 char(10), ...

  3. keepalived安装实现nginx主备高可用

    . keepalived安装环境 su - root yum -y install kernel-devel* yum -y install openssl-* yum -y install popt ...

  4. Vijos—— T 1359 Superprime

    https://vijos.org/p/1359 描述 农民约翰的母牛总是生产出最好的肋骨.你能通过农民约翰和美国农业部标记在每根肋骨上的数字认出它们. 农民约翰确定他卖给买方的是真正的质数肋骨,是因 ...

  5. Android数据库高手秘籍:SQLite命令

    要想熟练地操作任何一个数据库,最最基本的要求就是要懂SQL语言,这也是每个程序员都应该掌握的技能.虽说SQL博大精深,要想精通确实很难,但最基本的一些建表命令,增删改查,大家还是必须要学会的. SQL ...

  6. 数据库SQL Server2012笔记(三)——表的复杂查询

    1.数据分组--max/min/avg/sum/count select  avg(字段名),sum(字段名)  from  表名 select  count(*)  from  表名 select ...

  7. Java 零基础跑起第一个程序

    Java 零基础跑起第一个程序 一 概述 1  java代码编译 编译后才干在计算机中执行.编译就是把人能看懂的代码转换成机器能看懂的形式 2 java的长处 一次编译.到处执行.由于java代码是在 ...

  8. 2015.04.21,外语,读书笔记-《Word Power Made Easy》 11 “如何辱骂敌人” SESSION 31

    1.no reverence iconoclast([ai'kɔnәklæst]  n. 毁坏宗教神像的人, 提倡打破旧习的人)藐视传统.在青年的反叛期很容易出现iconoclasm([ai'kɔnә ...

  9. nyoj--114--某种序列(滚动数组)

    某种序列 时间限制:3000 ms  |  内存限制:65535 KB 难度:4 描述 数列A满足An = An-1 + An-2 + An-3, n >= 3  编写程序,给定A0, A1 和 ...

  10. springmvc生成注册验证码

    通过SPRing MVC为系统添加验证码 1:布局登陆页面,用户名,密码,填写验证码的文本框,及验证码的图片及点击换图 <%@ taglib prefix="c" uri=& ...