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

1.首先新建一个Cmponent.vue文件

// Cmponent.vue
<template>
<div>
我是组件
</div>
</template>

<script>
export default {

}
</script>

<style scoped>
div{
font-size:40px;
color:#fbb;
text-align:center;
}
</style>
2.其次在同一目录下建立index.js文件,在这个文件中使用install方法来全局注册该组件

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

}
// 导出该组件
export default component
3.使用

// 只要在index.js里规定了install方法,就可以向其他ui组件库那样,使用Vue.use()来全局使用
import loading from './index.js'

Vue.use(loading)

<template>
<div>
<component-name></component-name>
</div>
</template>

[转] vue自定义组件(通过Vue.use()来使用)即install的使用的更多相关文章

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

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

  2. vue自定义组件(通过Vue.use()来使用)即install的使用

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

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

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

  4. 如何让vue自定义组件可以包裹内容,并且渲染出来,以及组件的组合使用

    当我们用vue一开始写项目时,按需求文档自定义了一个公用组件,这个组件很多地方都用到了,然后随着项目的推进,又有了新的需求要在里面加东西,但又不是所有的地方都要加 这时候我们想这样往里面塞内容↓    ...

  5. vue 自定义组件销毁

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

  6. Vue自定义组件插入值

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

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

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

  8. vue自定义组件并使用

    以下是使用自己写的一个简单的文件上传框为例 1.自定义组件结构(一个js文件,一个vue文件),最好单独放一个文件 2.upload.vue 内容 其中,action是父组件传递给子组件的参数,使用p ...

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

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

随机推荐

  1. php如何解决中文乱码问题?

    为什么会出现中文乱码? 很多新手朋友学习PHP的时候,发现程序中的中文在输出的时候会出现乱码的问题,那么为什么会出现这种乱码的情况呢?一般来说,乱码的出现有2种原因,一种是由于编码(charset) ...

  2. CODEVS 3546 矩阵链乘法

    http://codevs.cn/problem/3546/ 题目 给定有n个要相乘的矩阵构成的序列(链)<A1,A2,A3,.......,An>,要计算乘积A1A2.....An.一组 ...

  3. 进程Process之join、daemon(守护)、terminate(关闭)、multiprocessing之锁、信号量和事件

    一.Process 参数介绍: 1 group参数未使用,值始终为None 2 target表示调用对象,即子进程要执行的任务 3 args表示调用对象的位置参数元组,args=(1,2,'a',) ...

  4. Nginx-Tomcat搭建负载均衡(转载)

    一.   工具 nginx-1.8.0 apache-tomcat-6.0.33 二.    目标 实现高性能负载均衡的Tomcat集群: 三.    步骤 1.首先下载Nginx,要下载稳定版: 2 ...

  5. Java【第八篇】面向对象之高级类特性

    static 关键字 当我们编写一个类时,其实就是在描述其对象的属性和行为,而并没有产生实质上的对象,只有通过new关键字才会产生出对象,这时系统才会分配内存空间给对象,其方法才可以供外部调用.我们有 ...

  6. Redmine简易安装与系统优化

    安装版本为bitnami-redmine-2.6.5-0 ,用的Bitnami的一键安装包 . 下载地址https://bitnami.com/stack/redmine/installer 简要安装 ...

  7. 数据可视化之pyecharts

    Echarts 是百度开源的一个数据可视化 JS 库,主要用于数据可视化.pyecharts 是一个用于生成 Echarts 图表的类库.实际上就是 Echarts 与 Python 的对接. 安装 ...

  8. kubernetes云平台管理实战: 最小的资源pod(二)

    一.pod初体验 1.编辑k8s_pod.yml文件 [root@k8s-master ~]# cat k8s_pod.yml apiVersion: v1 kind: Pod metadata: n ...

  9. 第二节:如何正确使用WebApi和使用过程中的一些坑

    一. 基本调用规则 1. 前提 WebApi的默认路由规则为:routeTemplate: "api/{controller}/{id}", 下面为我们统一将它改为 routeTe ...

  10. Node.js实战项目学习系列(5) node基础模块 path

    前言 前面已经学习了很多跟Node相关的知识,譬如开发环境.CommonJs,那么从现在开始要正式学习node的基本模块了,开始node编程之旅了. path path 模块提供用于处理文件路径和目录 ...