老雷uniApp教程之自定义组件

组件是把我们通用的一个功能模块封装成独立的文件，可以在不同页面调用。

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>