Vue组件

组件Component;
组件可以扩展 HTML 元素，封装可重用的代；

:is 属性指定的组件名称，把对应的组件渲染到 component 标签所在的位置 -->

全局注册:
- Vue.component(‘组件名称’, { }) 第1个参数是标签名称，第2个参数是一个选项对象
- 全局组件注册后，任何vue实例都可以用;

组件注意事项:
	1：组件参数的data值必须是函数同时这个函数要求返回一个对象 
	2：组件模板必须是单个根元素
	3：组件模板的内容可以是模板字符串;
	4：组件可以重复使用多次 ,因为data中返回的是一个对象所以每个组件中的数据是私有的 即每个实例可以维护一份被返回对象的独立的拷贝;
	5：如果使用驼峰式命名组件，那么在使用组件的时候，只能在字符串模板中用驼峰的方式使用组件；
	6：在字符串模板中可以使用驼峰的方式使用组件；
	7：但是在普通的标签模板中，必须使用短横线的方式使用组件；
		Vue.component('my-com', {
        					data: function () {
            					return {
                						count: 0
            					}
        					},
        					template :`<div><button @click="dian">点了{{count}}次</button></div>`,
        					methods: {
            					dian() {
                						this.count++
            					}
        					},
    			})

   			 var vm = new Vue({
        				el: '#app',
		}）；

局部注册：
只能在当前注册它的vue实例中使用；components: {}；

	var HellowWorld = {
        			data() {
            			return {
                				msg: 'hellowworld'
            			}
        			},
        			template: '<h3>{{ msg }}</h3>'
    		}

	var vm = new Vue({
        				el: '#app',
			components: {
            				'hellow-world': HellowWorld,
        				},
	};

父组件向子组件传值:
1：父组件发送的形式是以属性的形式绑定值到子组件身上。
2：需要动态的数据的时候 需要属性绑定的形式设置，数据则在父组件data中；
3：然后子组件用属性props一数组的形式接收；
props的属性值类型：String，Number，Boolean，Array，Object；
props传递数据原则：单项数据流；

子组件向父组件传值：
1： 子组件用$emit()触发事件；
2： $emit()第一个参数为自定义的事件名称第二个参数为需要传递的数据；3：父组件用v-on监听子组件的事件change($event):$emit 与子级事件的第一个参数对应；

兄弟之间的传递：
1：兄弟之间传递数据需要借助于事件中心，通过事件中心传递数据
2：提供事件中心 var hub = new Vue()
3：传递数据方，通过methods一个事件触发hub.$emit(方法名，传递的数据)4：接收数据方，通过mounted()钩子中触发hub.$on()方法名
5：销毁事件 通过hub.$off()方法名销毁之后无法进行传递数据；

组件插槽：
匿名插槽：默认内容
插槽内可以包含任何模板代码，包括 HTML，当组件渲染的时候，这个 元素将会被替换为“组件标签中嵌套的内容；
如果不传值，则展示slot里面镶嵌的内容；

具名插槽： <slot name='header'></slot>
	- 具有名字的插槽 ；
	- 使用 <slot> 中的 "name" 属性绑定元素；
	 通过slot属性来指定, 这个slot的值必须和下面slot组件得name值对应上，如果没有匹配到 则放到匿名的插槽中，放置多个标签通过<template slot='header'></template>;

作用域插槽：- 父组件对子组件加工处理，既可以复用子组件的slot，又可以使slot内容不一致；

	传递： <slot :info='item'>{{item.name}}</slot>
	接收：<template slot-scope='slotProps'> {{slotProps.info.name}}</template>

$event:事件对象； e.target：事件源对象；
event.currentTarget始终指向事件所绑定的元素，而event.target指向事件发生时的元素。一句话，target会变，点到谁身上返回谁，currentTarget不会变，返回事件源对象。