组件是把我们通用的一个功能模块封装成独立的文件,可以在不同页面调用。
1.组件注册
组件命名
kebab-case (短横线分隔命名) list-cell
PascalCase (首字母大写命名) ListCell
2.Prop
Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候,它就变成了那个组件实例的一个属性。
Prop用来实现由页面传给组件数据
命名 camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名
类型 数字 布尔 字符串 数组 对象
3.自定义事件
事件命名 采用 kebab-case (短横线分隔命名) 命名
代码语言:javascript复制 <my-component v-on:call-parent="doSomething"></my-component>
<div @click="$emit('call-parent','组件中的事件')"></div>
4.插槽<slot></slot>
代码语言:javascript复制 <list-cell >slot中的内容</list-cell>
组件
代码语言:javascript复制 <div>
<div>{{isGoods}}</div>
<div @click="$emit('call-parent',item)" v-for="(item,index) in items" :key="index">{{item}}</div>
<slot></slot>
</div>