上篇：VUE从入门到入坑—04.v-model指令 / 事件绑定指令 / 修饰符 / 深度响应式
一、什么是组件
组件就是零件，将零件组装成想要的工具（页面），组件是vue.js最强大的功能之一，它可以扩展html元素，封装可重用的代码，通过传入对象的不同，实现组件的复用。
1.定义全局组件
全局组件：使用Vue.component来创建全局组件，可以用在创建的 Vue 根实例 (new Vue) 的模板中，任何方式，任何地点都可以使用的标签组件。
Vue.component('mx-box', {
template:`
标题
`,
props:{ },
data() {
return { }
}
})
new Vue({ el: '#app' })
2.定义局部组件
只能在定义它的el中使用，不能在其他位置，否则就会失效。
new Vue({
el: '#app',
components: {
// 自定义组件名
'mx-box': {
template:`
hello
`,
props:{ },
data() {
return { }
}
}
}
})
(1)components选项中定义局部组件。每个组件就是一个小型的Vue实例，它里面除了不能设置el选项，其他选项它都有。
(2)组件名称：自定义，可以使用驼峰命名方式或者短横线的命名方式，但是需要注意的是如果应用到DOM中，就只能用短横线命名的方式，否则就会报错。注意组件的名称不要跟原生html元素重名。
(3)template选项：定义组件的模板。模板中必须包含一个根标签。
(4)props选项：定义组件标签上的属性。驼峰命名法的 prop 名（postTitle）需要使用其等价的短横线分隔命名法（post-title）命名。注意：props是只读的，不能修改（解决办法：在data中对props接收到的数据进行中转）。
(5)props的值可以是一个字符串数组，里面定义每一个标签属性名称，这是简单用法，不能对属性做严格的验证。例如：props:["count"]。
(6)props的值可以是一个对象，里面定义每个标签属性名称，以及对应的类型。例如：props:{ count:Number }。
(7)props的值可以是一个对象，里面定义的每个标签属性名称也可以是一个对象，在这个对象里面定义该属性的完整信息。type 定义类型，required 非空，default 默认值。例如：props: {count: { type: Number, required: true, default: 1 } }
(8)data：定义组件的数据。注意：Vue实例的data选项可以是一个对象，也可以是一个方法，由该方法返回一个对象。 但是在组件中，data选项必须是一个方法，由该方法返回一个对象。因为组件可能会使用很多次，如果data选项是对象的话，会导致多个组件使用了同一份数据。
二、全局组件和局部组件的区别
全局：可以再页面中任何位置使用。
局部：只能在定义它的el中使用，不能在其他位置，否则就会失效。
定义方法
全局：可以使用Vue.component（tagName，options）定义。
局部：可以通过Vue实例中component属性定义局部组件。
是否挂载：全局组件在扩展元素用于封装复用代码时不需要挂载，但是不常见，因为会影响浏览器的性能 局部组件必须手动挂载，否则会失效。
其他 局部组件中代码的编写是”components“,而全局组件中是”component“ 。
三、$emit()自定义事件
Vue为每个组件对象提供了一个内置方法：$emit，作用：子组件向父组件传值，触发自定义事件，注意：事件名称中不能采用大写字母。
// 触发一个自定义事件，事件名称是synccount，将val作为事件对象传出去
this.$emit('synccount',val)
四、练习，counter组件
- {{item.label}}--{{item.count}}
new Vue({
el: '#app',
// 定义数据
data: {
list: [
{ label: '衣服',count: 5 },
{ label: '裤子',count: 8 },
{ label: '鞋子',count: 3 },
{ label: '袜子',count: 10 }
]
},
methods: {
synccount(index, e) {
// 同步更新商品的数量
this.list[index].count = e
}
},
// 注册组件
components: {
'b-counter': {
template: `
{{label}}
`,
//props选项
props: {
// 文本
label: {
type: String,
// 允许为空
required: false,
},
// 数量
count: {
type: Number,
// 非空
required: true
},
// 最大值
maxCount: {
type: Number,
default: 999
},
// 最小值
minCount: {
type: Number,
default: 1
}
},
//定义数据
data() {
return {
// 将props接收到的count，中转给myCount
myCount: this.count
}
},
// 监听器
watch: {
// 侦听myCount是否发生变化
myCount(val) {
// 触发一个自定义事件synccount，将count的最新值作为事件对象传出去
this.$emit('synccount', val)
}
}
}
}
})
效果：
五、练习，评分组件
- {{item.title}}--{{item.value}}
// 注册全局组件
Vue.component('b-star', {
//模板
template:`
{{title}}
`,
// 定义组件的标签属性
props:{
title:{
type:String,
required:false
},
value:{
type:Number,
default:0
}
},
// 数据
data() {
return {
// 中转props传进来的value值
myValue:this.value,
// 定义一个确定值
okValue:this.value
}
},
// 方法
methods: {
// 鼠标进入时，调用的方法
enter(val){
this.myValue = val
},
// 鼠标离开时，调用的方法
leave(val){
this.myValue = this.okValue
}
},
// 监听器
watch:{
// 侦听okValue的变化
okValue(val){
// 触发自定义事件
this.$emit('syncvalue',val)
}
}
})
new Vue({
el:'#app',
data:{
list:[
{
title:'产品质量',
value:5
},
{
title:'物流速度',
value:7
},
{
title:'客服态度',
value:2
}
]
},
methods: {
// 同步评分
syncvalue(index,e){
this.list[index].value = e
}
},
})
效果：