一、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、注册局部组件



Logo

前往低代码交流专区

更多推荐