一、自定义组件
每一个组件就是一个小型的vue实例。除了不能设置el选项。其他选项都有。
使用template:``选项定义组件的模板。模板中必须包含一个根标签。相当于el
自定义组件一共有两种方法：
1、局部定义组件。
（1)、命名。属性名如果用特殊符号。需要用''包裹起来。
(2)、定义组件的属性。props：['自定义名称','自定义名字'].
写在vue实例里面，data后面.
语法：
components:{
'自定义名字': {
template: `
// 组件的模板
`,
// 必须定义组件的属性才能在页面中使用。
props:['',''],
data() {
return {
}
},
}
}
此处的data不可以是对象，只能是方法
使用
(1).直接在容器内输入自定义名字。
(2)、用:data里面定义的属性名绑定方可使用。
举例:
new Vue({
// 指定vue实例挂载的容器
el: '#app',
// 定义数据
data: {
list: [
{
title: '奔驰',
content: '心所向, 驰以恒。梅赛德斯 - 奔驰, 创新激情永不灭。作为汽车发明者, 我们从未停下脚步, 探索, 创造, 颠覆, 革新, 为心中所向, 驰之以恒!'
},
{
title: '宝马',
content: '宝马作为高端汽车品牌，不仅在国内的新车市场占有较高的市场占有率和知名度，而且在二手车领域也均推出了品牌二手车服务——宝马“尊选”，宝马尊选二手车是宝马集团于2003年在全球豪华品牌中首推的全球统一的二手车认证项目。2005年12月，宝马在中国启动了宝马尊选二手车认证项目。'
},
{
title: '奥迪',
content: '奥迪公司是1899年August Horch创立A Horch汽车公司，后来与合伙人意见不合另外又创立August Horch汽车公司，但因公司名称雷同被控告，所以改用Horch（德文听觉的意思）的拉丁文Audi为公司名称。'
},
]
},
// 定义局部组件.
components: {
'b-box': {
template: `<div class="box">
<h2 class="title">{{title}}</h2>
<div class="content">
{{content}}
</div>
</div>`,
// 定义组件的数据
// data() {
// return {
// title: '奔驰',
// content: '心所向, 驰以恒。梅赛德斯 - 奔驰, 创新激情永不灭。作为汽车发明者, 我们从未停下脚步, 探索, 创造, 颠覆, 革新, 为心中所向, 驰之以恒!'
// }
// },
// 定义组件的属性
props: ['title', 'content']
}
}
})
使用：
<div id="app">
<b-box :title="item.title" :content="item.content" v-for="(item, index) in list" :key="index"></b-box>
</div>
2、 props选项。用于定义组件的属性。有两种方式：1、定义数组。2、定义对象。props是只读不改。
要是想修改props里面定义的属性.需要在data函数里面重新接收props里面传的数。然后在页面中调用新的属性名
Vue.config.productionTip = false
new Vue({
el: '#app',
data: {
list: [
{
label: '衣服',
count: 5
},
{
label: '裤子',
count: 5
},
{
label: '鞋子',
count: 5
},
{
label: '袜子',
count: 5
},
],
},
methods: {
synccount(index, e) {
console.log(index, e);
// 更新数据
this.list[index].count = e
}
},
// 定义组件
components: {
'b-input': {
template: `
<div class="counter">
<div class="label">{{label}}</div>
<div class="btns">
<button @click="myCount--" :disabled="myCount===minCount">-</button>
<input class="text" type="text" readonly :value="myCount">
<button @click="myCount++" :disabled="myCount===maxCount">+</button>
</div>
</div>
`,
// props: ['label', 'count']
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(val) {
// 触发一个自定义事件。事件名称是syncCount。将count的最新值作为事件对象传出去。
// 自定义事件名称不能有大写。
this.$emit('synccount', val)
}
}
}
}
})
使用：
<div id="app">
<ul>
<li v-for="(item, index) in list" :key="index">{{item.label}}--{{item.count}}</li>
</ul>
<b-input v-for="(item, index) in list" :key="index" :label='item.label' :count='item.count'
@synccount="synccount(index,$event)">
</b-input>
</div>
2、注册全局组件
语法：Vue.compent('自定义名称',函数{
函数里面的写法和定义局部组件的方式一样
模板
template: ``
})
同样需要中转props传进来的value值。
例子：
Vue.component('b-star', {
// 模板
template: `
<div class="star">
<div class="label">{{title}}</div>
<div>
<i v-for="item in 10" :key="item" class="iconfont" :class="item<=myValue?'icon-xingxing':'icon-star'" @mouseenter="enter(item)" @mouseleave="leave(item)" @click="okValue=item"></i>
</div>
</div>
`,
// props选项。用于定义组件的属性
props: {
title: {
type: String,
required: false
},
value: {
type: Number,
default: 0
}
},
// 数据
data() {
return {
// 中转props传进来的value值
myValue: this.value,
// 定义一个确定值
okValue: true
}
},
// 方法
methods: {
enter(val) {
this.myValue = val
},
leave(val) {
this.myValue = this.okValue
}
},
// 监听器
watch: {
okValue(val) {
this.$emit('syncvalue', val)
}
}
})
Vue.config.productionTip = false
new Vue({
el: '#app',
data: {
list: [
{
title: '产品质量',
value: 5
},
{
title: '物流速度',
value: 7
},
{
title: '客服态度',
value: 2
},
]
},
methods: {
syncvalue(index, e) {
this.list[index].value = e
}
},
})
引用：
<div id="app">
<ul class="list">
<li v-for="(item, index) in list" :key="index">{{item.title}}--{{item.value}}</li>
</ul>
<b-star v-for="(item, index) in list" :key="index" :title="item.title" :value="item.value" @syncvalue="syncvalue(index,$event)"></b-star>
</div>
二、插槽
插槽：<slot></slot>
如果不使用插槽的话，自定义组件内是不可以写内容的。
把插槽放在自定义组件内，就可以随意添加内容了
例子：
Vue.component('b-tab', {
// slot代表插槽
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: '长沙的臭豆腐真好吃'
},
]
}
})
引用：
<div id="app">
<b-tab :list="list" :active="activeIndex">
<h2>拽而有礼，拽而不狂</h2>
<img src="https://img1.baidu.com/it/u=4250017269,4275607819&fm=26&fmt=auto" alt="" width="100px">
</b-tab>
</div>
三、第三方组件库
组件库的选择看具体的情况而定。
常用的组件库有：
1、Element组件库.
2、iview组件库。
3、组件库：https://www.antdv.com/docs/vue/introduce-cn/ 。此组件库需要特定的环境使用。
4、Vant组件库。开发小程序。
使用第三方组件库的步骤。
1、需要在body之前，先引入组件库的css样式.
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css"
/>
2、在引入第三方组件库进来,把vue引入进来。
<script src='https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js'></script>
3、最后引入需要使用的第三方组件库。
<script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
4、在页面中直接复制需要用的组件代码以及vue代码。
注意：使用iview组件库的时候，在页面中使用组件代码时，需要在组件前面＋i-然后把大写变为小写
<i-button type="success">成功</i-button>
