1、组件注册
Vue.component('name',{}) 创建的组件都是全局组件，它们在注册之后可以用在任何新创建的Vue根实例(new Vue)的模板中。第一个参数是组件的名字，第二个参数是一个方法，可以在其中定义组件的data数据、template模板、props传值、components组件注册、computed计算属性、method方法、watch监听数据变化、以及生命周期的构子函数：beforeCreate、created、beforeMount、mounted、beforeupdate、updated、beforeDestroy、destroyed。
推荐创建一个 components 目录，并将每个组件放置在其各自的文件中：
import ComponentA from './ComponentA'
import ComponentC from './ComponentC'
export default {components: {ComponentA,ComponentC}
}2、Prop
-
由于浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop名需要使用其等价的 kebab-case (短横线分隔命名) 命名。prop可以是任何类型的数据、变量或对象，当prop是对象时，即使对象是静态的也必须使用v-bind。不要在子组件中改变prop的数据，可以在自身的data里保存一份该prop属性
Vue.component('user', {props: ['sayHello']})<user say-Hello="hello!"></user> 我们可以传递静态Prop（如上），也可以使用v-bind传递动态Prop（如下） <user :title="post.title"></user> -
prop验证（控制传入组件数据的类型）
Vue.component('mycomponent',{props:{propZ：null, //匹配任何类型propA:Number, //数字类型propB：[Number,String], //多个可能的类型propC：{type:String,required:true, //必填default:'Hello' //默认},propD:{type:Object, //对象类型default:function(){ //默认函数return {msg:'hello'}}},propE:{//自定义验证validator: function (value) {// 这个值必须匹配下列字符串中的一个return ['success', 'warning', 'danger'].indexOf(value) !== -1}},user:Person}})
3、自定义事件
1、事件名建议始终使用短横线连接的方式如：my-event
2、自定义组件的 v-model：Vue.component('base-checkbox', {model: {prop: 'checked',event: 'change'},props: {checked: Boolean},template: `<inputtype="checkbox"v-bind:checked="checked"v-on:change="$emit('change', $event.target.checked)">`})<base-checkbox v-model="lovingVue"></base-checkbox>4、插槽<slot>
1、组件：<base-layout>：<div class="container"><header><slot name="header"></slot></header><main><slot></slot></main><footer><slot name='footer'></slot></footer><slot name="footer"></slot></div><base-layout><template slot='header'><h3>我是Header</h3></template><p>我没有名字</p><p>显示在默认插槽</p><h3 slot='footer'>具名插槽2</h3></base-layout>结果：<div class="container"><header><h3>我是Header</h3></header><main><p>我没有名字</p><p>显示在默认插槽</p></main><footer><h3>具名插槽2</h3></footer></div>5、动态组件与异步组件
<!-- 失活的组件将会被缓存！-->
<keep-alive> //<keep-alive>缓存组件切换状态，组件必须有名字<component v-bind:is="currentTabComponent"></component> //is 特性来切换不同的组件
</keep-alive>