vue之自定义组件的制作，简单到你怀疑人生

最近项目做完了，闲来无事，重新读了一遍vue官方文档，发现了以前很多没有的东西以及自己没注意的方法。

自定义组件就相当于方法封装，在写项目遇到像类似的代码，第一想法就是我得把它封装起来，其实自定义组件也差不多。

废话不多说，我们开始吧。

首先，要有思路：

官方提供了自定义组件接收参数的方法---prop，以及向外传递信息的方法---$emit，既然对外互通的方法有了，那么方法就一目了然了，一个简单的组件就诞生了，最基础最简单的组件类似于父子组件的交互：

组件：

// src/components/GoodsLi.vue
// 这是一个简单的单栏物品展示组件，在做列表展示时经常用到
// 可以把所有出现的样式写成一个个组件，然后需要的时候引入即可

<template>
    <div class="goods-li-item" @click="chose(goods.id)">
        <div class="pic">
            <img :src="goods.pic"/>
        </div>
        <div class="desc">
            <div class="title">{{goods.title}}</div>
            <div class="sub-title">{{goods.subTitle}}</div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "goods-li",
        props: ['goods'],
        methods: {
            chose(id) {
                // 第一个参数是外部接收方法，第二个参数是当前选中的物品id
                // this.$emit是向外传递信息的方法
                this.$emit('chose-goods-item', id)
            }
        }
    }
</script>

<style scoped>
    .goods-li-item{
        display: flex;
    }
    .pic{
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        background: #8dc63f;
        overflow: hidden;
    }
    .desc{
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        text-align: left;
        background: #39b54a;
        padding-left: 10px;
    }
</style>

使用：

// src/pages/goods/List.vue

<template>
    <div class="goods-list-wrap">
        <goods-li 
            v-for="li in goodsList" 
            :goods="li" 
            :key="li.id"
            @chose-goods-item="chose" 
        ></goods-li>
    </div>
</template>

<script>
   
    export default {
        components: {
            // 官方推荐异步引入
            // https://cn.vuejs.org/v2/guide/components-dynamic-async.html
            'goods-li': () => import('../../components/GoodsLi')
        },
        data() {
            return {
                goodsList: [
                    {
                        id: 1,
                        pic: 'https://xxx.com/pic1.pic',
                        title: '苹果',
                        subTitle: '世界最好吃的苹果'
                    },
                    {
                        id: 2,
                        pic: 'https://xxx.com/pic2.pic',
                        title: '苹果2',
                        subTitle: '世界最好吃的苹果2'
                    },
                    {
                        id: 3,
                        pic: 'https://xxx.com/pic3.pic',
                        title: '苹果3',
                        subTitle: '世界最好吃的苹果3'
                    }
                ],
                choseList: []
            }
        },
        methods: {
            chose(id) {
                this.choseList.push(id);
                console.log(this.choseList)
            }
        }
    }
</script>

你可以直接复制粘贴测试下，样式什么的不要计较了，点击物品栏，console中的选项就会增加。

注意this.$emit中的事件名官方推荐最好用 kebab-case 命名，即我这种命名，因为html中对对大小写不敏感。你如果写成this.$emit('choseGoodsItem', id)，它会识别为chosegoodsitem。

如果你的组件需要全局引入的话，请于官网查看 https://cn.vuejs.org/v2/guide/components-registration.html#%E5%85%A8%E5%B1%80%E6%B3%A8%E5%86%8C

---

简单的入门级自定义组件完成了，那么我们就开始制作正式的常用普通级自定义组件了，前方还是天堂，你准备好了吗？

---

学会了普通级自定义组件，我们要不要讲下深入型高级自定义组件，高级自定义组件就是地狱了，抱歉，我也只是听说过，看了看官方文档，还没实际用过。暂时不说了。等以后如果用到了再补全或者重新发文吧。