vue自定义组件是.vue还是html,vue之自定义组件的制作，简单到你怀疑人生

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

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

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

首先，要有思路：

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

组件：

// src/components/GoodsLi.vue

// 这是一个简单的单栏物品展示组件，在做列表展示时经常用到

// 可以把所有出现的样式写成一个个组件，然后需要的时候引入即可

{{goods.title}}

{{goods.subTitle}}

export default {

name: "goods-li",

props: ['goods'],

methods: {

chose(id) {

// 第一个参数是外部接收方法，第二个参数是当前选中的物品id

// this.$emit是向外传递信息的方法

this.$emit('chose-goods-item', id)

}

}

}

.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;

}

使用：

// src/pages/goods/List.vue

v-for="li in goodsList"

:goods="li"

:key="li.id"

@chose-goods-item="chose"

>

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)

}

}

}

你可以直接复制粘贴测试下，样式什么的不要计较了，点击物品栏，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

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

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