首页 > 其他 > 详细

vue自定义组件并使用

时间:2018-07-10 17:14:22      阅读:418      评论:0      收藏:0      [点我收藏+]

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

时间:20180710

编写:luoxm

qq:1085656523

1、自定义组件结构(一个js文件,一个vue文件),最好单独放一个文件

  技术分享图片

2、upload.vue 内容

         技术分享图片  

  其中,action是父组件传递给子组件的参数,使用props进行接收,并关联到action中。  

  props 父级传给组件的数据   然后用  $emit(‘方法名‘,数据) 返回父级数据

  

3、index.js内容

  技术分享图片

  index.js的内容分成3个步骤(缺一不可):

    a)、引入vue组件

    b)、进行全局安装

    c)、导出组件

以上是完成一个子组件定义。

接下来进行组件的使用

4、在main.js文件中,导入自定义的组件,并进行Vue.use()

  技术分享图片

5、在需要使用该组件的地方进行调用

  技术分享图片

其中,:action-url=‘actionUrl‘中的actionUrl值,在data中进行定义即可

 

vue自定义组件并使用

原文:https://www.cnblogs.com/luoxuemei/p/9289897.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!