创建新组件

1、在根目录创建components文件夹
2、创建对应页面的子文件夹 （例： indexpage---存放首页中相关的组件）
3、继续在indexpage内创建文件夹 (例： tab---定义tab组件的文件夹)
4、在tab上右击--> 新建Component-->输入名字-->回车后会自动生成四个文件
tab.js
tab.json
tab.wxml
tab.wxss

在页面中引入组件

以index为例， 在index页面中引入该组件

1、在index.json中配置

"usingComponents": {
"x-tab": "/components/indexpage/tab/tab"
},

"x-tab": 为自定义组件的名称
"/components/indexpage/tab/tab"： 为组件文件的路径（注意第一个tab 为文件夹，第二个tab为文件名）

2、在index.wxml中使用组件

<x-tab></x-tab>

编辑组件

1、tab.json: 组件中也可引入自己的子组件
2、tab.wxml 组件的模板
3、tab.wxss 组件的样式
4、重点：tab.js 可实现父子组件传值
Component() : 创建自定义组件，接受一个 Object 类型的参数。
常用参数：
1、properties: { } 属性定义，即从父组件接收的数据
2、data: {} 私有数据，可用于模板渲染
3、 methods: {} 处理函数
4、 observer: { } 监听数据的改变
5. lifetimes:{} 最新格式一般用来写组件生命周期函数

页面向组件传值

1、 页面通过自定义属性向组件传值： <x-tab 自定义属性=”值”></x-tab>
2、组件通过properties接收页面传来的值 （可在组件的模板中直接使用）
properties: {
msg: String,
goodsId: {
type: Number,
value: 4
}
},

组件向页面传值

子组件通过事件触发          
tab.wxml             
<button type="primary" bindtap="send">向页面传值</button>


triggerEvent方法向父组件发送自定义事件
tab.js
methods: {
    send(){
      this.triggerEvent("send",'组件的值')
    }
  }

父组件监听到该事件则触发相应的事件处理程序
index.wxml
<x-tab goodsId="{{list[cur].id}}" type="msg" bindsend="getData"></x-tab>
index.js

getData(e){
    console.log('getData',e.detail);
  }

组件中的插槽

一、只有一个插槽
组件：

<view>
 .....
<slot></slot>

</view>

页面

<组件标签>

      <view>插入的内容</view>

</组件标签>

组件中的插槽

二、多个插槽
页面

<组件标签>

      <view slot=”c1”>插入的内容</view>

      <view slot=”c2”>插入的内容</view>

</组件标签>

组件：

<view>
 .....
<slot name=“c1”></slot>

<slot name=“c2”></slot>

</view>

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  properties: { /* ... */ },
  methods: { /* ... */ }
})