一、自定義組件
每一個組件就是一個小型的vue實例。除了不能設(shè)置el選項。其他選項都有。
使用template:``選項定義組件的模板。模板中必須包含一個根標簽。相當于el
自定義組件一共有兩種方法：
1、局部定義組件。
（1)、命名。屬性名如果用特殊符號。需要用''包裹起來。
(2)、定義組件的屬性。props：['自定義名稱','自定義名字'].
寫在vue實例里面，data后面.
語法：
components:{
'自定義名字': {
template: `
// 組件的模板
`,
// 必須定義組件的屬性才能在頁面中使用。
props:['',''],
data() {
return {
}
},
}
}
此處的data不可以是對象，只能是方法
使用
(1).直接在容器內(nèi)輸入自定義名字。
(2)、用:data里面定義的屬性名綁定方可使用。
舉例:
new Vue({
// 指定vue實例掛載的容器
el: '#app',
// 定義數(shù)據(jù)
data: {
list: [
{
title: '奔馳',
content: '心所向, 馳以恒。梅賽德斯 - 奔馳, 創(chuàng)新激情永不滅。作為汽車發(fā)明者, 我們從未停下腳步, 探索, 創(chuàng)造, 顛覆, 革新, 為心中所向, 馳之以恒!'
},
{
title: '寶馬',
content: '寶馬作為高端汽車品牌，不僅在國內(nèi)的新車市場占有較高的市場占有率和知名度，而且在二手車領(lǐng)域也均推出了品牌二手車服務(wù)——寶馬“尊選”，寶馬尊選二手車是寶馬集團于2003年在全球豪華品牌中首推的全球統(tǒng)一的二手車認證項目。2005年12月，寶馬在中國啟動了寶馬尊選二手車認證項目。'
},
{
title: '奧迪',
content: '奧迪公司是1899年August Horch創(chuàng)立A Horch汽車公司，后來與合伙人意見不合另外又創(chuàng)立August Horch汽車公司，但因公司名稱雷同被控告，所以改用Horch（德文聽覺的意思）的拉丁文Audi為公司名稱。'
},
]
},
// 定義局部組件.
components: {
'b-box': {
template: `<div class="box">
<h2 class="title">{{title}}</h2>
<div class="content">
{{content}}
</div>
</div>`,
// 定義組件的數(shù)據(jù)
// data() {
// return {
// title: '奔馳',
// content: '心所向, 馳以恒。梅賽德斯 - 奔馳, 創(chuàng)新激情永不滅。作為汽車發(fā)明者, 我們從未停下腳步, 探索, 創(chuàng)造, 顛覆, 革新, 為心中所向, 馳之以恒!'
// }
// },
// 定義組件的屬性
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、定義數(shù)組。2、定義對象。props是只讀不改。
要是想修改props里面定義的屬性.需要在data函數(shù)里面重新接收props里面?zhèn)鞯臄?shù)。然后在頁面中調(diào)用新的屬性名
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);
// 更新數(shù)據(jù)
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
},
// 數(shù)量
count: {
type: Number,
// 非空
required: true
},
// 最大值
maxCount: {
type: Number,
default: 999
},
// 最小值
minCount: {
type: Number,
default: 1
}
},
// 定義數(shù)據(jù)
data() {
return {
// 將props接收到的count給myCount
myCount: this.count,
}
},
watch: {
myCount(val) {
// 觸發(fā)一個自定義事件。事件名稱是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('自定義名稱',函數(shù){
函數(shù)里面的寫法和定義局部組件的方式一樣
模板
template: ``
})
同樣需要中轉(zhuǎn)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
}
},
// 數(shù)據(jù)
data() {
return {
// 中轉(zhuǎn)props傳進來的value值
myValue: this.value,
// 定義一個確定值
okValue: true
}
},
// 方法
methods: {
enter(val) {
this.myValue = val
},
leave(val) {
this.myValue = this.okValue
}
},
// 監(jiān)聽器
watch: {
okValue(val) {
this.$emit('syncvalue', val)
}
}
})
Vue.config.productionTip = false
new Vue({
el: '#app',
data: {
list: [
{
title: '產(chǎn)品質(zhì)量',
value: 5
},
{
title: '物流速度',
value: 7
},
{
title: '客服態(tài)度',
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>
如果不使用插槽的話，自定義組件內(nèi)是不可以寫內(nèi)容的。
把插槽放在自定義組件內(nèi)，就可以隨意添加內(nèi)容了
例子：
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/ 。此組件庫需要特定的環(huán)境使用。
4、Vant組件庫。開發(fā)小程序。
使用第三方組件庫的步驟。
1、需要在body之前，先引入組件庫的css樣式.
<link
rel="stylesheet"
/>
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、在頁面中直接復(fù)制需要用的組件代碼以及vue代碼。
注意：使用iview組件庫的時候，在頁面中使用組件代碼時，需要在組件前面＋i-然后把大寫變?yōu)樾?/p>
<i-button type="success">成功</i-button>
