doc---vue-cli脚手架项目问题总结（11）——vue的组件的使用

##、使用Vue.use()使用全局组件
在main.js中引入组件（组件必须要在一个文件夹下，里面要写入index.js；index.js是入口文件。）

组件my_login.vue是按一般组件的格式进行开发；

Index.js是组件的入口文件：

import MyLogin from './my_login.vue'
// 这里是重点
const Mylogin = {
    install: function(Vue){
        Vue.component('My-login', MyLogin)
    }
}
// 导出组件
export default Mylogin

页面中使用的时候直接写入，不用import，也不用components，需要的数据传递和方法通知照常写入就可以；

##、vue通过extend动态创建全局组件（插件）
创建一个toast.vue文件：

<template>
	<div class="wrap" v-if="show">
		<div>{{text}}</div>
		<div>{{temp1}}</div>
	</div>
</template>

<script>
export default {
	data () {
		return {
			temp1 : "你好vbyzc"
		}
	}
}
</script>


<style scoped>
.wrap{
	color:#fff;
	background-color: rgba(0,0,0,0.8);
	padding: 10px;
	position: fixed;
	top:50%;left: 50%;
	border-radius: 10px;;
}
</style>

在toast.vue文件的同级文件夹中创建一个index.js文件

import vue from 'vue'
import toastComponent from './toast'

//使用vue的extend，以vue文件为基础组件，返回一个可以创建vue组件的特殊构造函数
const ToastConstructor = vue.extend(toastComponent)

function showToast(text,duration = 2000){
	const toastDom = new ToastConstructor({
		el : document.createElement('div'),
		data(){
			return {
				text:text,
				show:true
			}
		}
	})
	　　//在body中动态创建一个div元素，后面自动会把它替换成整个vue文件内的内容
	document.body.appendChild(toastDom.$el)
	setTimeout(() => {
		toastDom.show=false
	},duration)
}

function registryToast (){
	//把showToast这个方法添加到uve的原型中，可以直接调用，当调用的时候就是执行函数内的内容
	vue.prototype.$toast = showToast
}
export default registryToast

最后一步，在入口js文件中：

import toastRegistry from './components/toast_index.js'//用这个方法注册组件，所有vue页面都可以使用，不用再import
//定义全局组件生成的有2个种方法，一种myPlugin={install(){...}},一种function myPlugin(){....}
//vue.use方法内部，会判断toastRegistry，如果是函数就直接执行，如果是object则执行它的install对象
//导为导入的toastRegistry是一个函数，所以也可以直接执行toastRegistry()
Vue.use(toastRegistry)

在任何vue文件中使用它：

<button @click="modifySendvalue">改传输到子组件的值</button>

showToast(){
this.$toast('哈哈哈哈');
}

##、通过Vue.component()使用全局组件

页面中直接调用就可以的。

##、使用require.context自动注册全局组件




这样就可以在添加组件之后自动全局注册组件，不用再import引入等；