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 的编译器为它 ...
随机推荐
- NFS学习
linux下搭建nfs服务: NFS是network filesystem的缩写,它可以通过网络,让不同的机器.不同的操作系统共享文件. NFS支持的功能比较多,默认端口也是随机的,基于远程调用服务( ...
- HDU——T1231 最大连续子序列
http://acm.hdu.edu.cn/showproblem.php?pid=1231 Problem Description 给定K个整数的序列{ N1, N2, ..., NK },其任意连 ...
- 洛谷 U249 匹配
U249 匹配 题目描述 输入整数s和两个整数集合A和B,从这A和B中各取一个数,如果它们的和等于s,称为“匹配”.编程统计匹配的总次数 输入输出格式 输入格式: 第一行为三个整数s(0<s≤1 ...
- 解决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 ...
- 生成静态页java代码
package com.fang.news.test; import java.io.BufferedReader; import java.io.BufferedWriter; import jav ...
- 数据库SQL Server2012笔记(三)——表的复杂查询
1.数据分组--max/min/avg/sum/count select avg(字段名),sum(字段名) from 表名 select count(*) from 表名 select ...
- MongoDB 2.6安装
Workaround to install as a service You can manually install 2.6.0 as a service on Windows from an Ad ...
- Unreal Engine 4 C++ 为编辑器中Actor创建自己定义图标
有时候我们创建场景的时候,特定的Actor我们想给它一个特定的图标,便于观察.比方这样: 实现起来也非常easy.须要编写C++代码: 我们创建一个Actor,叫AMyActor.它包括一个Sprit ...
- 重构版机房收费系统之分层、接口、数据库连接、反射+工厂(vb.net)
分层 分层是为了减少层与层之间的依赖,添加程序的可读性,让整个系统结构清晰明白.还可大大减少维护成本,可是分层也有一定的缺点,有些能够直接訪问数据库的层,却要通过负责訪问数据库的层进行訪问.这样,在訪 ...
- CountDownTimer,0,0
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); s ...