(Vue -07)组件：自定义组件 + 组件中的插槽
一、组件注册
1.组件名
在注册一个组件的时候，我们始终需要给它一个名字。
Vue.component('my-component-name', { /* ... */ })
该组件名就是 Vue.component 的第一个参数。
我们可以在官方-风格指南中查阅到关于组件名的其它建议。
组件名称：自定义，可以使用短横线或者驼峰命名方式的命名方式，
但是需要注意的是如果应用到DOM中，就只能用短横线命名的方式，否则就会报错。注意组件的名称不要跟原生html元素重名。
组件名大小写:
定义组件名的方式有两种：
① 使用 kebab-case （是的没错就是烤肉串(～￣▽￣)～）
当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 <my-component-name>。
Vue.component('my-component-name', { /* ... */ })
② 使用 PascalCase
当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。
Vue.component('MyComponentName', { /* ... */ })
2.全局注册
这些组件是全局注册的。也就是说它们在注册之后，可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。比如：
Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })
new Vue({
el: '#app'
})
<div id="app">
<component-a></component-a>
<component-b></component-b>
<component-c></component-c>
</div>
在所有子组件中也是如此，也就是说这三个组件在各自内部也都可以相互使用。
3.局部注册
局部注册的组件，只能在当前Vue实例中使用，并且在其子组件中不可用。
在components选项中定义局部组件。
每个组件就是一个小型的Vue实例，它里面除了不能设置el选项，其他选项它都有。
① template选项：定义组件的模板。模板中必须包含一个根标签。
② props选项：定义组件标签上的属性。
驼峰命名法的 prop 名（postTitle）需要使用其等价的短横线分隔命名法（post-title）命名。
注意：props是只读的，不能修改（解决办法：在data中对props接收到的数据进行中转）。
- props的值可以是一个字符串数组，里面定义每一个标签属性名称，这是简单用法，不能对属性做严格的验证。不够严谨。
例如：props:["count"]。 - props的值可以是一个对象，里面定义每个标签属性名称，以及对应的类型。
例如：props:{ count:Number }。 - props的值可以是一个对象，里面定义的每个标签属性名称也可以是一个对象，
在这个对象里面定义该属性的完整信息。
type定义类型，required非空，default默认值。
例如：props: {count: { type: Number, required: true, default: 1 } }
③ data：定义组件的数据。
注意：Vue实例的data选项可以是一个对象，也可以是一个方法，由该方法返回一个对象。 但是在组件中，data选项必须是一个方法，由该方法返回一个对象。因为组件可能会使用很多次，如果data选项是对象的话，会导致多个组件使用了同一份数据。
new Vue({
el: '#app',
components: {
// 自定义组件名
'component-name': {
template:`
<div>
<p> hello </p>
</div>
`,
props:{ },
data() {
return { }
}
}
}
})
<div id="app">
<component-name> </component-name>
</div>
全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。
传送看官方┗|｀O′|┛ 嗷~~
二、自定义组件练习
<div id="app">
<ul class="list">
<li v-for="(item,index) in list" :key="index">{{item.label}}---{{item.count}}</li>
</ul>
<b-counter v-for="(item,index) in list" :key="index"
:min-count="2" :max-count="10" :label="item.label" :count="item.count"
@synccount="synccount(index,$event)"></b-counter>
</div>
<script>
Vue.config.productionTip = false
new Vue({
el: '#app',
data: {
list:[
{label: '衣服', count: 5},
{label: '裤子', count: 3},
{label: '鞋子', count: 4},
{label: '书包', count: 2},
]
},
methods: {
synccount(index,e){
this.list[index].count = e
}
},
components: {
'b-counter': {
template: `
<div class="counter">
<div class="label">{{label}}</div>
<div class="btns">
<button @click="myCount--" :disabled="myCount===minCount">-</button>
<input type="text" class="text" :value="myCount" readonly>
<button @click="myCount++" :disabled="myCount===maxCount">+</button>
</div>
</div>
`,
props:{
label:{
type:String,
required:false
},
count:{
type:Number,
required:true
},
maxCount:{
type:Number,
default:30
},
minCount:{
type:Number,
default:1
}
},
data(){
return {
//将props接收到的count，中转给myCount
myCount:this.count
}
},
watch:{
myCount(val){
this.$emit('synccount',val)
}
}
}
}
})
</script>
触发一个自定义事件，事件名称是synccount，将val的最新值作为事件对象传出去
$emit()用于触发自定义事件。注意：自定义事件名称不能采用大写。
this.$emit('synccount',val)
<b-counter v-for="(item,index) in list" :key="index"
:min-count="2" :max-count="10" :label="item.label" :count="item.count"
@synccount="synccount(index,$event)"></b-counter>
三、组件中的插槽 slot
在模板里面搞个<slot> ..... </slot>，插槽在模板的某处，那这个东东就在html的某处显示。
<div id="app">
<b-tab :list="list" :active="activeIndex">
<h2>全国著名小吃</h2>
</b-tab>
</div>
<script>
Vue.config.productionTip = false
Vue.component('b-tab', {
template:`
<div class="tab">
<slot></slot>
<ul class="titles">
<li @click="activeIndex=index" :class="{active:activeIndex===index}" v-for="(item,index) in list" :key="index">{{item.title}}</li>
</ul>
<ul class="contents">
<li v-show="activeIndex===index" v-for="(item,index) in list" :key="index">{{item.content}}</li>
</ul>
</div>
`,
props:['list','active'],
data(){
return {
activeIndex:this.active
}
}
})
new Vue({
el:'#app',
data:{
//高亮索引
activeIndex:0,
list:[
{title:'北京',content:'北京的糖葫芦真好吃'},
{title:'南京',content:'南京的盐水鸭真好吃'},
{title:'武汉',content:'武汉的热干面真好吃'},
{title:'长沙',content:'长沙的臭豆腐真好吃'},
]
}
})
</script>
