uniApp自定义组件-老雷php全栈开发教程

1.组件注册

组件命名 

kebab-case (短横线分隔命名) list-cell

PascalCase (首字母大写命名) ListCell

2.Prop

Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。

Prop用来实现由页面传给组件数据

命名  camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名

类型 数字 布尔 字符串 数组 对象

3.自定义事件

事件命名 采用 kebab-case (短横线分隔命名) 命名

<my-component v-on:call-parent="doSomething"></my-component>

<div @click="$emit('call-parent','组件中的事件')"></div>

4.插槽<slot></slot>

<list-cell >slot中的内容</list-cell>

组件

<div>

<div>{{isGoods}}</div>

<div @click="$emit('call-parent',item)" v-for="(item,index) in items" :key="index">{{item}}</div>

<slot></slot>

</div>

课后练习

上传图片的组件 

轮播图的组件

视频组件

音频组件