1st.定义自定义组件
自定义组件是解决代码复用问题的方法，封装自定义组件可以使得在处理许多相似业务时更方便快捷的编写代码。
1.1.局部定义方法：
局部就是只能在一个vue实例中使用，定义方法是使用components对象编写自定义组件：
new Vue({
el: '#app',
data: {
},
components: {
"b-box": {
template: `<div class="box">
<h2 class="title">Hello {{ name }} </h2>
</div>`,
data(){
return {
name:"张三"
}
},
}
})
注：1.在components对象中，属性名即为自定义组件的名称，之后使用自定义组件也是使用这个属性名的标签，注意，因为html中标签不区分大小写，而这里的属性名是要在html中使用的，所以命名不能使用大写字母，应使用全小写加连字符-来连接代替驼峰式命名法。
2.每个组件就是一个小型的Vue实例，它里面除了不能设置el选项，要使用组件的模板template来写组件在使用时要渲染的内容，而且模板中要有一个根标签
3.data属性不能使用对象来写，要使用方法的返回对象来写。
1.2.全局定义方法：
在全局定义的自定义组件可以在页面中所有的vue实例中使用。在定义时使用Vue.component方法：
Vue.component( "b-box",{
template: `<div class="box">
<h2 class="title">Hello{{ name }}</h2>
</div>`,
data(){
return {
name:"张三"
}
}
})
2nd.使用自定义组件
使用自定义组件只要在html中使用自定义组件名称的标签即可，与普通标签一样，可以使用通用的vue语法如 v-for v-if 等
<b-box></b-box>
3rd.自定义属性
自定义组件是灵活的，它需要渲染的值也可以让vue实例通过自定义属性的方法传给内部。自定义属性的定义使用 props 来定义：
props简写：
Vue.component("b-box", {
template: `<div class="box">
<h2 class="title">Hello{{ name }}</h2>
<p>{{value1}}</p>
<p>{{value2}}</p>
</div>`,
data() {
return {
name: "张三"
}
},
props: ["value1", "value2"]
})
props详写：
Vue.component("b-box", {
template: `<div class="box">
<h2 class="title">Hello{{ name }}</h2>
<p>{{value1}}</p>
<p>{{value2}}</p>
</div>`,
data() {
return {
name: "张三"
}
},
props: {
value1:{
//数据类型
type:String,
//是否必填
required: false,
//默认值
default:"666"
},
value2:{
//数据类型
type:String,
//是否必填
required: true,
//默认值
default:"888"
},
}
})
注：自定义属性的命名不支持用驼峰命名，不能使用大写。
4rd.自定义属性的使用
与普通标签一样，自定义属性的使用是在标签中加入自定义属性名，并给与值：
<b-box value1="666" value2="877"></b-box>
5rd.自定义属性的中转
自定义属性的值传到内部时是只读的，不能修改，所以当需要改变自定义属性值的时候，需要先在自定义组件的data中定义一个变量来存放传进来的值，然后使用这个变量来操作：
Vue.component("b-box", {
template: `<div class="box">
<h2 class="title">Hello{{ name }}</h2>
<p>{{value1}}</p>
<p>{{value}}</p>
<button @click = "value++">++</button>
</div>`,
data() {
return {
name: "张三",
value:this.value1
}
},
props: {
value1:{
//数据类型
type:Number,
},
}
})
6rd.自定义事件
因为传到自定义组件中的值不能修改，当通过中转的方法修改了的值在原vue中需要使用时，需要通过自定义事件的方法来获取到修改了之后的数据，自定义事件使用vue的 $emit 方法来定义：
Vue.component("b-box", {
template: `<div class="box">
<h2 class="title">Hello{{ name }}</h2>
<p>{{value1}}</p>
<p>{{value}}</p>
<button @click = "value++">++</button>
</div>`,
data() {
return {
name: "张三",
value:this.value1
}
},
props: ["value1"],
watch:{
value(){
this.$emit('sync', this.value)
}
}
})
注：自定义事件的命名不支持用驼峰命名，不能使用大写。
7rd.使用自定义事件
首先在标签中绑定自定义的事件
<b-box value1="6" @sync="sync"></b-box>
然后再方法中定义绑定的事件，通过事件对象来接受传过来的值
sync(e){
console.log(e);
}
在事件中处理传过来的数据即可。
8rd.自定义组件中插槽的用法
slot 用于在组件的内部定义插槽，组件标签之间的内容，会在插槽所在位置呈现。
/html
div id='app'>
<b-box>
<h2>HelloWorld</h2>
</b-box>
</div>
/自定义组件
Vue.component("b-box", {
template: `<div class="box">
<h2 class="title">Hello{{ name }}</h2>
<slot></slot>
</div>`,
data() {
return {
name: "张三",
value: this.value1
}
},
})
效果：
