vue插件（自定义组件或js文件使用），vue.extend()，vue.component()注册组件

淩亂°似流年 2022-05-24 07:18 261阅读 0赞

### 一、vue.use()自定义组件或者引用第三方组件（即vue文档中的插件）？ ###

参考：https://cn.vuejs.org/v2/guide/plugins.html

#### 1.1、使用第三方组件 ####

通常我们在vue里面使用别人开发的组件，第一步就是install,第二步在main.js里面引入，第三步Vue.use这个组件。

例如：引入element-ui组件。

#### 1.2、自定义组件或js文件 ####

### 1.2.1、自定义组件 ###

使用自定义的组件今天我简单的也来use一个自己的组件。

例如： 自定义loading组件。

这里我用的webpack-simple这个简单版本的脚手架为例，安装，直接进入正题

首先看下目前的项目结构：

![1027889-20170402111827680-852527492.png][]

webpack首先会加载main.js，所以我们在main的js里面引入。我以element ui来做对比说明

![复制代码][copycode.gif]

import Vue from 'vue'
    import App from './App.vue'
    
    // 引入element-ui组件
    import ElementUi from 'element-ui'
    import 'element-ui/lib/theme-default/index.css'
    
    // 引入自定义组件。index.js是组件的默认入口
    import Loading from '../components/loading'
    Vue.use(Loading);
    
    Vue.use(ElementUi);
    new Vue({
      el: '#app',
      render: h => h(App)
    })

![复制代码][copycode.gif]

然后在Loading.vue里面定义自己的组件模板

![复制代码][copycode.gif]

<template>
        <div class="loading">
            loading...
        </div>
    </template>

![复制代码][copycode.gif]

在index.js文件里面添加install方法

![复制代码][copycode.gif]

import MyLoading from './Loading.vue'
    // 这里是重点
    const Loading = {
        install: function(Vue){
            Vue.component('Loading',MyLoading)
        }
    }
    
    // 导出组件
    export default Loading

![复制代码][copycode.gif]

接下来就是在App.Vue里面使用组件了，这个组件已经在main.js定义加载了

![复制代码][copycode.gif]

![复制代码][copycode.gif]

下面是效果图

![1027889-20170402112511961-1513576504.png][]

### 1.2.2.1、自定义js文件一 ###

main.js文件中引用

import config from './common/config.js'
    Vue.use(config)

config.js文件，添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。

export default {
    	install: function (Vue) {
    		Vue.prototype.config = {
    			defaultImgSize: '_0x0',
    		}
    	}
    }

组件中直接使用：config.dafaultSize获取到对象值

### 1.2.2.2、自定义js文件二 ###

base.js文件：

export default {
    	created () {
    		window.vm = this;
    		let title = this.docTitle;
    		if(title == ""){
    			title = this.defaultTitle
    		}else{
    			if((this.defaultTitle).indexOf('-') == -1){
    				title = title + " - " + this.defaultTitle
    			}else{
    				let arr = this.defaultTitle.split(' - ');
    				title = title + " - " + arr[arr.length - 1]
    			}
    			
    		}
    		document.title = title;
    	},
    	data () {
    		return {
    			defaultTitle: document.title,
    			docTitle: ""
    		}
    	},
    	filters: {
    		getResourceUrl (resourceCode) {
    			let url = "about:blank";
    			if(resourceCode){
    				url = Site.api.upfileBaseUrl + resourceCode;
    			}
    			return url;
    		},
    
    		//传入日期或者日期对象返回格式化的日期
    		getDate (d) {
    			let date,
    				dateObj;
    
    			if(_.isString(d)){
    				dateObj =new Date(d);
    			}
    			if(_.isDate(dateObj) && "Invalid Date" != dateObj.toString()){
    				date = Site.globalize.format(dateObj,"yyyy年MM月dd日");
    			}else{
    				date = "----年--月--日"
    			}
    			return date;
    		},
    
    		//传入数字返回格式化的价格
    		getPrice (number) {
    			let price = number - 0; //转成数字
    			if(isNaN(price)){
    				price = 0;
    			}
    			price.toFixed(2);
    			return "￥" + price.toFixed(2);
    		},
    
    		//传入数字返回格式化的重量
    		getWeight (number) {
    			let weight = number - 0; //转成数字
    			if(isNaN(weight)){
    				weight = 0;
    			}
    			return "约 " + weight + "g";
    		}
    	},
    	methods: {
    		getProductSpec (data, name) {
    			let list = [];
    			if(_.isArray(data)){
    				_.each(data, item => {
    					if(item.DataName == name){
    						list = item.DataList || [];
    						return false;
    					}
    				});
    			}
    			return list;
    		}
    	}
    }

组件中引入：

import base from '../mixins/base'
    methods中使用：
    getPrice (price) {
    	return base.filters.getPrice(price);
    },

###     ###

### 二、vue.extend()创建一个组件构造器？vue.component()注册组件？ ###

参考：https://blog.csdn.net/qq\_25371579/article/details/78476990

流程：创建组件------->注册组件---->使用组件

#### 2.1、注册为全局组件 ####

例如：在main.js中，初始化根实例之前，将menu组件注册到全局

import menu from './components/menu/index'
    Vue.component('shopMenu',menu)

根实例中所有组件都可以直接引用此组件

#### 2.2、注册局部组件 ####

[1027889-20170402111827680-852527492.png]: /images/20220524/8c304152edf744a79b923ad1b62ba73d.png
[copycode.gif]: /images/20220524/9b5b20be1aba47f8be24dc7f174668aa.png
[1027889-20170402112511961-1513576504.png]: /images/20220524/50aa1ec13dfe4d1ca2c801c8541cc6c9.png