1.语法：Vue.component("组件名字",{data,template})，代码如下：
a. data： 必须是一个函数，有一个返回值。和vue里面的使用方法一样
b. template: 用来标示这个组件的渲染后的具体的代码
<div id=‘app‘>
<button-count></button-count>
<button-count></button-count>
<button-count></button-count>
</div>
<script>
Vue.component("button-count",{
template:"<button @click=‘count+=1‘>点击了{{count}}</button>",
data:function(){
return{
count:0
}
}
})
new Vue({
el:‘#app‘,
data:{
}
})
</script>
2.组件的属性是通过props定义的，可以是一个数组，直接写属性名字。也可以是一个对象，可以给每个属性定义约束，比如：type，required，default。组件中只能有一个根元素。代码如下：
<div id=‘app‘>
<blog-list :blogs="blogs"></blog-list>
</div>
<script>
Vue.component("blog-list",{
//props:[‘blogs‘]
props:{
blogs:{
type:Array,
required:true
}
},
template:`
<table>
<thead>
<tr>
<th>序号</th>
<th>标题</th>
</tr>
</thead>
<tbody>
<tr v-for="(blog,index) in blogs">
<td>{{index+1}}</td>
<td>{{blog.title}}</td>
</tr>
</tbody>
</table>
`
})
new Vue({
el:‘#app‘,
data:{
blogs:[{
title:"坏蛋是怎样练成的",
content:"xxx"
},{
title:"python基础",
content:"ooo"
}]
}
})
</script>
3.自定义组件添加事件：代码如下：
a.在需要触发事件的时候，调用this.$emit(事件名称,参数...)
b.在使用这个组件的时候，绑定事件，语法同html比如：@check-chenged
<div id=‘app‘>
<blog-itme v-for="blog in blogs" :blog=blog @check-changed="checkChanged"></blog-itme>
<h1>选中的是：</h1>
<div v-for="blog in selected_blogs">
{{blog.title}}
</div>
</div>
<script>
Vue.component("blog-itme",{
props:["blog"],
template:`
<div>
<span>{{blog.title}}</span>
<input type="checkbox" @click="onCheck">
</div>
`,
methods:{
onCheck(){
this.$emit("check-changed",this.blog)
}
}
})
new Vue({
el:‘#app‘,
data:{
blogs:[{
title:"坏蛋是怎样练成的",
id:"1"
},{
title:"python基础",
id:"2"
}],
selected_blogs:[]
},
methods:{
checkChanged(blog){
// console.log(blog);
//indexOf:获取某个元素在数组中的位置，如果返回非负数说明存在就是下标，反之不存在
let index = this.selected_blogs.indexOf(blog)
if(index>=0){
this.selected_blogs.splice(index,1)
}else{
this.selected_blogs.push(blog)
}
}
}
})
</script>
4.自定义组件v-model：计步器-->在配置中需要两个属性进行配置
a.event:代表什么情况下触发这个v-model行为
b.prop：代表传给v-model的那个变量，要绑定到那个属性上
c.调用this.$emit(model.event,计算后的结果)就可以了，代码如下：
<div id=‘app‘>
<Stepper v-model="goods_count"></Stepper>
</div>
<script>
//计步器
Vue.component("Stepper",{
props:[‘count‘],
model:{
event:"count-changed",
prop:"count"
},
template:`
<div>
<button @click="sub">-</button>
<span>{{count}}</span>
<button @click="add">+</button>
</div>
`,
methods:{
sub(){
this.$emit("count-changed",this.count-1)
},
add(){
this.$emit("count-changed",this.count+1)
}
}
})
new Vue({
el:‘#app‘,
data:{
goods_count:0
}
})
</script>
5.自定义组件--插槽
a.插槽的用法是在组件的模板代码汇总，在指定的位置使用slot，以后在使用这个组件的时候，在组件中添加的内容都在slot的位置
b.作用区域：插槽中只能使用组件中的数据，只能从父组件中读取数据
c.默认值，可以填写一个默认值，使用的时候可以用默认值，也可以自己写值 代码如下：
<div id=‘app‘>
<chacao url="https://www.baidu.com/">百度</chacao>
<div>
<moren>哈哈</moren>
<moren></moren>
</div>
</div>
<script>
Vue.component("chacao",{
props:[‘url‘],
template:`
<div>
<a :href="url">谷歌</a>
<slot></slot>
</div>
`
})
Vue.component("moren",{
template:`
<button>
<slot>确定</slot>
</button>`
})
new Vue({
el:‘#app‘,
data:{
}
})
</script>
6.自定义名称插槽：如果想要在自定义组件中定义多个插槽，就需要给插槽取个名字。
a.定义： <slot name="名称"></slot>
b.使用： <template v-slot:名称>XXX</template>
代码如下：
<div id=‘app‘>
<container>
<template v-slot:header>这个是header</template>
<template v-slot:body>这个是body</template>
<template v-slot:footer>这个是footer</template>
</container>
</div>
<script>
Vue.component(‘container‘,{
template:`
<div class="container">
<div>
<slot name="header"></slot>
</div>
<div>
<slot name="body"></slot>
</div>
<div>
<slot name="footer"></slot>
</div>
</div>
`
})
new Vue({
el:‘#app‘,
data:{
}
})
</script>
7.自定义插槽作用域：
a.把不要给差插槽的变量绑定到slot上
b.在使用插槽的时候指定名称后，加上一个名称，绑定到slot上所有的属性可以通过这个名称获得 代码如下：
<div id=‘app‘>
<container>
<template v-slot:header="headerprops">
{{headerprops.navs}}
</template>
<template v-slot:footer="footerprops">
{{footerprops.address}}/ {{footerprops.aboutus}}
</template>
</container>
</div>
<script>
Vue.component("container",{
template:`
<div>
<div class="header">
<slot name="header" :navs="navs"></slot>
</div>
<div class="footer">
<slot name="footer" :address="address" :aboutus="aboutus"></slot>
</div>
</div>
`,
data:function(){
return {
"address":"公司地址",
"aboutus":"关于我们",
navs:[‘网络设置‘,‘我的谁‘]
}
}
})
new Vue({
el:‘#app‘,
data:{
}
})
</script>
原文地址：https://www.cnblogs.com/Mr-Simple001/p/12083678.html