vue中自定义组件(插件)

原创 2017年01月04日 22:46:43

在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法:

1、首先建一个自定义组件的文件夹,比如叫loading,里面有一个index.js,还有一个自定义组件loading.vue,在这个loading.vue里面就是这个组件的具体的内容,比如:

<template>
<div>
loading..............
</div>
</template> <script>
export default { }
</script> <style scoped>
div{
font-size:40px;
color:#f60;
text-align:center;
}
</style>

在index.js中,规定了使用这个组件的名字,以及使用方法,如:


import loadingComponent from './loading.vue' const loading={
install:function(Vue){
Vue.component('Loading',loadingComponent)
} //'Loading'这就是后面可以使用的组件的名字,install是默认的一个方法
}; export default loading;

只要在index.js中规定了install方法,就可以像一些公共的插件一样使用Vue.use()来使用,如:

import loading from './loading'

Vue.use(loading)

这是在入口文件中引入的方法,可以看到就像vue-resource一样,可以在项目中的任何地方使用自定义的组件了,比如在home.vue中使用

<template>
<div>
<Loading></Loading>
</div>
</template>

这样就可以使用成功

最新文章

  1. 安装 whmcs
  2. 算法训练 A+B Problem
  3. 创建laravel项目时打开浏览器常见错误
  4. 嵌入式 H264视频通过RTMP直播
  5. iOS scrollView/tableView滚动到底部
  6. mysql 排序后获得某行的位置
  7. 读书共享 Primer Plus C-part 7
  8. Django 模板.html中 href参数传入
  9. C#+EntityFramework编程方式详细之Model First
  10. windows下的端口转发命令netsh
  11. HTML设为首页/加入收藏代码
  12. Eclipse Memory Analyzer(MAT)使用
  13. PythonStudy——阶段总结
  14. java多线程系列7 高级同步工具(1)信号量Semaphore
  15. SDWebImage之SDWebImageManager
  16. Flask使用SQLAlchemy两种方式
  17. 【java编程】格式化字符串
  18. static关键字的功能
  19. redis-java基础操作
  20. [Offer收割]编程练习赛13 B.最大子矩阵[枚举]

热门文章

  1. java基础笔记(8)----接口
  2. [COGS 2583]南极科考旅行
  3. JavaWeb学习笔记三 Servlet
  4. New UWP Community Toolkit - RadialProgressBar
  5. nginx session 配置失效解决
  6. 201621123050 《Java程序设计》第9周学习总结
  7. iOS Storyboard unwind segues使用小结
  8. D的下L
  9. Three.js three.js Uncaught TypeError: Cannot read property &#39;getExtension&#39; of null
  10. JAVA_SE基础——69.Date类