一、自定义组件

每一个组件就是一个小型的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>