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

一、vue.use()自定义组件或者引用第三方组件（即vue文档中的插件）？参考：https://cn.vuejs.org/v2/guide/plugins.html1.1、使用第三方组件通常我们在vue里面使用别人开发的组件，第一步就是install,第二步在main.js里面引入，第三步Vue.use这个组件。例如：引入element-ui组件。1.2.1、自定义组件使用自定义的组件今天我简单

github_39598787

6580人浏览 · 2018-05-30 18:18:35

github_39598787 · 2018-05-30 18:18:35 发布

一、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这个简单版本的脚手架为例，安装，直接进入正题

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

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

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)
})

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

<!-- 这里和普通组件的书写一样 -->
<template>
    <div class="loading">
        loading...
    </div>
</template>

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

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

// 导出组件
export default Loading

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

<template>
  <div id="app">
  <!-- 使用element ui的组件 -->
  <el-button>默认按钮</el-button>

  <!-- 使用自定义组件 -->
  <Loading></Loading>
  </div>
</template>

下面是效果图

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)

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

<shopMenu></shopMenu>

2.2、注册局部组件

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^