组建的特点：
组件其实也是一个Vue实例，因此它在定义时也会接收：data、methods、生命周期函数等；
组件不会与页面的元素绑定，否则就无法复用了，因此没有el属性。
但是组件渲染需要html模板，所以增加了template属性，值就是HTML模板；
data必须是一个函数，不再是一个对象。
Vue全局组件注册后是在任何实例下都可以使用的，注册方式为
Vue.component('button-counter（组件名）', {
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
data(){
return { count: 0 }
},
})
局部组件只能在注册过的父组件使用，是直接在Vue实例里面注册，父组件调用时要使用
var Child = { template: '<div>A custom component!</div>' }
components{
'my-component': Child
}
注意：
局部组件定义时使用的时components,全局组件注册时Vue.component,多一个s
局部组件在注册的时候因为内容比较复杂，所以建议模板定义在一个全局变量里，代码看起来容易一点（项目中一般另外定义一个.vue文件，一个.vue文件就是一个组件，当要调用某个组件时，引入子组件，然后再components里面注册即可使用）
注意局部注册的组件在其子组件中不可用。
组件间传值：
父传子：
父组件调用子组件是传入message
<vue2test :message="message"></vue2test>
子组件通过 props:['message']可以获得父组件传过来的值，多个值可以在数组里放入多个值获得
子传父：
子组件不能直接将值传给父组件，必须通过触发父组件绑定在子组件上监听的函数传值
父组件：<vue2test :message="message" @acceptChild="acceptChild"></vue2test> 注意：若绑定的函数有参数，函数名后不要加括号
子组件：子组件会通过$emit('函数名',参数)形式触发父组件绑定的函数，子组件中需要以某种方式触发事件
非父子组件传值：
vue没有提供直接子组件对子组件的方法，如果是与父组件的父组件进行通讯可以采用链式传值，先传到父组件，然后经由父组件再传过去。但不推荐此方法进行非父子组件间的通讯。vue官网提供了vue状态管理来解决非父子组件间的通讯，vuex就香一个组件共用的仓库，不同组件间可以通过vuex进行值的更改与传递。更多关于vuex的使用等待vuex总结更新。
插槽：
Slot 通俗的理解就是“占位”，在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑（替换组件模板中slot位置）
并且可以作为承载分发内容的出口
插槽内可以包含普通文本、也可以包含任何模板代码，包括HTML、其他组件、使用数据；
规则：
父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。
(默认内容)插槽
有时候我们需要给插槽设置一个具体的默认内容，当别的组件没有给你内容的时候，那么默认的内容就会被渲染
具名插槽
有时候我们一个组件里需要多个插槽，<slot>元素有一个特殊的特性：name ，这个特性可以用来定义额外的插槽
如果一个<slot>不带name属性的话，那么它的name默认为default
在向具名插槽提供内容的时候，我们可以在<template>元素上使用v-slot指令，并以参数的形式提供其名称
使用方法：
在子组件定义插槽：<slot name="footer"></slot>
父组件中在
在向具名插槽提供内容的时候，我们可以在<template>元素上使用v-slot指令，并以参数的形式提供其名称
< soltTestVue （子组件名）>
<template v-slot: footer >
<h1>给子组件具名插槽传递的内容</h1>
</template>
</ soltTestVue >
现在 <template> 元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有 v-slot 的 <template> 中的内容都会被视为默认插槽的内容。
注：v-slot只能添加在一个<template>上，(只有一种例外情况，下面会说)
作用域插槽
插槽跟模板其他地方一样都可以访问相同的实例属性(也就是相同的"作用域")，而不能访问子组件的作用域
父组件： v-slot:default="slotProps"拿那个插槽的值：如果有多个插槽绑定值，只有一个就取默认
<soltTestVue >
<template v-slot:default="slotProps"> {{ slotProps.msg }} </template>
<template v-slot:footer="footerTest"> {{footerTest.footer}} </template>
</soltTestVue>
子组件：
<slot :msg="msg"></slot>
<slot name="footer" :footer="footer"></slot>
绑定在 <slot> 元素上的特性被称为插槽 prop。在父组件中，我们可以用 v-slot 设置一个值来定义我们提供的插槽 prop 的名字，然后直接使用就好了
解构插槽Prop
因为 作用域插槽 的内部工作原理是将你的插槽内容包括在一个传入单个参数的函数里
这意味着v-slot的值实际上可以是任何能够作为函数定义中的参数的 JS 表达式
所以本来是这样写的：
<div>
<test v-slot="slotProps">
{{slotProps.usertext.firstName}}
</test>
</div>
还可以这样写：
<div><test v-slot={usertext}>
{{usertext.firstName}}
</test>
</div>
这样可以使模板更简洁，尤其是在该插槽提供了多个prop的时候。它同样开启了prop重命名等其它可能，
例如可以将 usertext 重命名为 person：
<div><test v-slot={usertext:person}>
{{person.firstName}}
</test>
</div>
甚至可以定义 后备内容(默认内容)，用于插槽没有值时可以使用默认内容的情形：
<div>
<test v-slot="{usertext={firstName:'Yang'}}">
{{usertext.firstName}}
</test>
</div>
动态插槽名(2.6.0新增)
动态指令参数也可以用在v-slot上，来定义动态的插槽名：
<base-layout>
<template v-slot:[dynamicSlotName]>
...
</template>
</base-layout>
具名插槽的缩写(2.6.0新增)
跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header：
原来是这样写的：
<div>
<template v-slot:header>
<h1>Here might be a page title</h1>
</template>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
<template v-slot:footer>
<p>Here some contact info</p>
</template>
</div>
现在可以这样写：
<div>
<template #header>
<h1>Here might be a page title</h1>
</template>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
<template #footer>
<p>Here some contact info</p>
</template>
</div>
注：该指令和其他指令一样，只在其有参数的时候才可用
如果希望使用缩写的话，必须始终以明确插槽名取而代之
