Vue-06-全局组件的使用

第六节随堂笔记

一、知识点部分

1. 全局组件的创建方法：Vue.component(name,object),全局组件使用前不需要在components中挂载，直接在template使用即可（第一个参数为组件名称，第二个参数为options）

二、代码部分

<div id="app"></div>

<script src="js/vue.min.js"></script>
<script>
	//创建一个头部组件
	var Vheader = {
		template:`<div><h2>Header</h2></div>`
	}
	//创建一个左侧组件
	var Vaside = {
		template:`<div><h2>aside</h2><Vbtn>登录</Vbtn/></div>`
	}
	//创建一个底部组件
	var Vfooter = {
		template:`<div><h2>footer</h2><Vbtn>登录</Vbtn/></div>`
	}
	var App = {
		components:{//挂载三个组件
			Vheader,
			Vaside,
			Vfooter
		},
		template:`
		<div>
		我是一个局部组件
		<Vheader/>
		<Vaside/>
		<Vfooter/>
		</div>`  //调用三个组件
	}

	
	Vue.component('Vbtn',{
		template:`
			<!-- 插槽 vue的内置组件 slot 作为承载 分发内容 的出口 -->
			<button>
				<slot>按钮</slot>	
			</button>
		`
	})




	new Vue({
		el:'#app',
		data(){
			return{

			}
		},
		components:{ //挂载组件
			App
		},
		template:`
			<App/>
		` //调用组件

	})

</script>