一、自定義組件

每一個(gè)組件就是一個(gè)小型的vue實(shí)例已烤。除了不能設(shè)置el選項(xiàng)鸠窗。其他選項(xiàng)都有。
使用template:``選項(xiàng)定義組件的模板胯究。模板中必須包含一個(gè)根標(biāo)簽稍计。相當(dāng)于el
自定義組件一共有兩種方法：

1、局部定義組件裕循。

（1)臣嚣、命名。屬性名如果用特殊符號(hào)剥哑。需要用''包裹起來硅则。

(2)、定義組件的屬性株婴。props：['自定義名稱','自定義名字'].

寫在vue實(shí)例里面怎虫，data后面.

語法：

        components:{
            '自定義名字': {
                template: `
                // 組件的模板
                `,
                // 必須定義組件的屬性才能在頁面中使用。
                props:['',''],
                data() {
                    return {             
                    }
                },
            }
        }

此處的data不可以是對(duì)象困介，只能是方法

使用

(1).直接在容器內(nèi)輸入自定義名字大审。
(2)、用:data里面定義的屬性名綁定方可使用座哩。

舉例:

 new Vue({
            // 指定vue實(shí)例掛載的容器
            el: '#app',
            // 定義數(shù)據(jù)
            data: {
                list: [
                    {
                        title: '奔馳',
                        content: '心所向, 馳以恒徒扶。梅賽德斯 - 奔馳, 創(chuàng)新激情永不滅谋作。作為汽車發(fā)明者, 我們從未停下腳步, 探索, 創(chuàng)造, 顛覆, 革新, 為心中所向, 馳之以恒!'
                    },
                    {
                        title: '寶馬',
                        content: '寶馬作為高端汽車品牌锅铅，不僅在國內(nèi)的新車市場(chǎng)占有較高的市場(chǎng)占有率和知名度，而且在二手車領(lǐng)域也均推出了品牌二手車服務(wù)——寶馬“尊選”，寶馬尊選二手車是寶馬集團(tuán)于2003年在全球豪華品牌中首推的全球統(tǒng)一的二手車認(rèn)證項(xiàng)目囚巴。2005年12月擎勘，寶馬在中國啟動(dòng)了寶馬尊選二手車認(rèn)證項(xiàng)目痘昌。'
                    },
                    {
                        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選項(xiàng)。用于定義組件的屬性饥臂。有兩種方式：1逊躁、定義數(shù)組。2隅熙、定義對(duì)象稽煤。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ā)一個(gè)自定義事件酵熙。事件名稱是syncCount。將count的最新值作為事件對(duì)象傳出去驰坊。
                            // 自定義事件名稱不能有大寫匾二。
                            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、注冊(cè)全局組件

語法：Vue.compent('自定義名稱',函數(shù){
函數(shù)里面的寫法和定義局部組件的方式一樣
模板
template: ``
})
同樣需要中轉(zhuǎn)props傳進(jìn)來的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選項(xiàng)察藐。用于定義組件的屬性
            props: {
                title: {
                    type: String,
                    required: false
                },
                value: {
                    type: Number,
                    default: 0
                }
            },
            // 數(shù)據(jù)
            data() {
                return {
                    // 中轉(zhuǎn)props傳進(jìn)來的value值
                    myValue: this.value,
                    // 定義一個(gè)確定值
                    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益愈、在引入第三方組件庫進(jìn)來,把vue引入進(jìn)來梢灭。

<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組件庫的時(shí)候摸袁，在頁面中使用組件代碼時(shí)钥顽，需要在組件前面＋i-然后把大寫變?yōu)樾?/p>

<i-button type="success">成功</i-button>