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

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. NFS学习

    linux下搭建nfs服务: NFS是network filesystem的缩写,它可以通过网络,让不同的机器.不同的操作系统共享文件. NFS支持的功能比较多,默认端口也是随机的,基于远程调用服务( ...

  2. HDU——T1231 最大连续子序列

    http://acm.hdu.edu.cn/showproblem.php?pid=1231 Problem Description 给定K个整数的序列{ N1, N2, ..., NK },其任意连 ...

  3. 洛谷 U249 匹配

    U249 匹配 题目描述 输入整数s和两个整数集合A和B,从这A和B中各取一个数,如果它们的和等于s,称为“匹配”.编程统计匹配的总次数 输入输出格式 输入格式: 第一行为三个整数s(0<s≤1 ...

  4. 解决VTune错误PMU resources currently being used by another profiling tool or process

    错误信息: When I ran Hardware Event-based Sampling Analysis 0, it showed the ERROR: Collection failed Co ...

  5. 生成静态页java代码

    package com.fang.news.test; import java.io.BufferedReader; import java.io.BufferedWriter; import jav ...

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

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

  7. MongoDB 2.6安装

    Workaround to install as a service You can manually install 2.6.0 as a service on Windows from an Ad ...

  8. Unreal Engine 4 C++ 为编辑器中Actor创建自己定义图标

    有时候我们创建场景的时候,特定的Actor我们想给它一个特定的图标,便于观察.比方这样: 实现起来也非常easy.须要编写C++代码: 我们创建一个Actor,叫AMyActor.它包括一个Sprit ...

  9. 重构版机房收费系统之分层、接口、数据库连接、反射+工厂(vb.net)

    分层 分层是为了减少层与层之间的依赖,添加程序的可读性,让整个系统结构清晰明白.还可大大减少维护成本,可是分层也有一定的缺点,有些能够直接訪问数据库的层,却要通过负责訪问数据库的层进行訪问.这样,在訪 ...

  10. CountDownTimer,0,0

    @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); s ...