什么是插件什么是组件

插件是用来扩展 Vue.js 的功能，它是一个包含 install 方法的对象。插件可以用来添加全局方法、属性、指令、过滤器，甚至改变 Vue 构造器，也可以用来创建全局组件或指令。插件通常用来为 Vue 添加全局功能。

组件是可复用的 Vue 实例，且带有一个名字。组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在 Vue.js 中，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。

编写一个vue插件

let time = new Date(),
	dateArray = new Array(180).fill(0),
	oneDay = 86400000,
	categroy = {};
dateArray.forEach((item, index) => {
	let date = new Date(Date.parse(new Date(time)) + oneDay * index);
	let year = date.getFullYear(),
		month = date.getMonth() + 1,
		day = date.getDate();
	month = month < 10 ? `0${month}` : month;
	day = day < 10 ? `0${day}` : day;
	let temp = `${year}-${month}-${day}`;
	if (!categroy[`${year}-${month}`]) {
		categroy[`${year}-${month}`] = [];
		let week = new Date(temp).getDay();
		for (let i = 0; i < week; i++) {
			categroy[`${year}-${month}`].push("");
		}
	}
	categroy[`${year}-${month}`].push(temp);
});

let MonthArray = Object.keys(categroy),
	DayArray = Object.values(categroy),
	WeekArray = [
		"星期一",
		"星期二",
		"星期三",
		"星期四",
		"星期五",
		"星期六",
		"星期天",
	];

let ComponentObj = {
	props: {
		value: {
			type: String,
			default: "",
		},
	},
	template: `<div class="date-picker-content">
                        <div v-for="(item,index) in MonthArray" :key="index">
                            <p>{{item}}</p>
                            <ul class="clearfix">
                                <li v-for="(weekItem,weekIndex) in WeekArray" :key="weekIndex">{{weekItem}}</li>
                            </ul>
                            <ul class="clearfix">
                                <li v-for="(dayItem,dayIndex) in DayArray[index]" :key="dayIndex">
                                    <span v-if="dayItem" @click="DateClick(dayItem)" :class="{'active':dayItem==SelectDate}">
                                        {{dayItem}}
                                    </span>
                                </li>
                            </ul>
                        </div>
                    </div>`,
	data() {
		return {
			MonthArray,
			DayArray,
			WeekArray,
			SelectDate: "",
		};
	},
	watch: {
		SelectDate(newVal) {
			this.SelectDate = newVal;
		},
	},
	methods: {
		DateClick(value) {
			this.SelectDate = value;
			this.$emit("input", value);
		},
	},
};

const DatePicker = {
	install(Vue, options) {
		/**
		 * ComponentObj是一个vue组件对象
		 */
		Vue.component("DatePicker", ComponentObj);
	},
};

Vue.use(DatePicker);

new Vue({
	el: "#app",
	components: {
		// datePicker: ComponentObj
	},
	data() {
		return {
			date: "",
		};
	},
	watch: {
		date(val, val2) {
			console.log(val);
		},
	},
	template: `<div><datePicker v-model="date" /></div>`,
});