自定义组件

1.微信官方文档

路径：开发 -> 指南 -> 自定义组件

2.定义组件

特征：
● 与页面类似，一个自定义组件由4个文件组成：.wxml, .wxss, .json, .js
● 在 .js 文件中，通过 Component(Object) 方法注册组件，并提供组件的属性定义、内部数据和自定义方法
● 在 .json 文件中，通过 “component”:true 配置项来表示该文件是组件
注意事项：
● 自定义组件时，在 .wxss 文件中只能使用类选择器，不要使用ID、标签、属性等选择器
● 为避免自定义组件名称与内置组件名称或标签名称冲突，建议自定义组件名称使用连字符方式（如：nav-bar），不建议只使用一个单词
示例代码（定义一个名称为 nav-bar 的组件）：

# nav-bar.wxml
<view class="navbar">
  <view class="item" bindtap="show">{{ msg }}</view>
  <view class="item">导航B</view>
</view>

# nav-bar.wxss
.navbar {
  height: 40px;
  display: flex;
  border: 1px solid #cccccc;
  background: #dedede;
}
.navbar > .item {
  flex-grow: 1;
  font-size: 12px;
  text-align: center;
  line-height: 40px;
  height: 40px;
  border: 1px solid white;
}

# nav-bar.json
{
  "component": true,
  "usingComponents": {}
}

# nav-bar.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    msg:'导航A'
  },

  /**
   * 组件的方法列表
   */
  methods: {
    show(){
      console.log('执行了show方法......')
    }
  }
})

3.使用组件

● 局部引用
在某个页面或组件的 .json 文件中引用声明，只能在该页面或组件中使用
● 全局引用
在全局的 app.json 文件中引用声明，可以在所有页面或组件中调用
● 在其它组件或页面中，直接使用指定的标签名进行组件调用
● 新建页面 component 使用自定义组件，示例代码如下：

# component.wxml
<!-- 
  自定义组件基本用法
 -->
<view class="title">自定义组件基本用法</view>
<!-- 局部引用 -->
<nav-bar></nav-bar>
<!-- 全局引用 -->
<app-bar></app-bar>

<!-- 
  组件的生命周期
 -->
<view class="title">组件的生命周期</view>
<comp-1 wx:if="{{ flag }}"></comp-1>
<button type="primary" bindtap="doComp">{{ btnName }}</button>

# component.json
{
  "usingComponents": {
    "nav-bar":"/components/nav-bar/nav-bar"
  }
}

4.组件生命周期

● 自定义组件自身生命周期
● 引用自定义组件页面的生命周期
● 示例代码（自定义组件comp-1）：

# comp-1.wxml
<view class="box">
  <view>hello</view>
</view>

# comp-1.wxss
.box {
  border: 1px solid #ccc;
  margin: 10px;
}

# comp-1.json
{
  "component": true,
  "usingComponents": {}
}

# comp-1.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

  },

  /**
   * 组件的生命周期
   */
  lifetimes: {
    created(){
      console.log('组件被创建......'); // 此时还不能调用 setData
    },
    attached(){
      console.log('组件进入页面节点树......'); // 常用
    },
    detached(){
      console.log('组件从页面节点外移除......');
    }
  },

  /**
   * 组件所在页面的生命周期
   */
  pageLifetimes: {
    show() {
      console.log('组件所在页面显示......');
    },
    hide() {
      console.log('组件所在页面隐藏......');
    }
  }
})

5.组件间数据传递

● 父向子传递数据
○ 父组件在调用子组件时，以属性绑定的方式将要传递的数据绑定在子组件标签上。
○ 在子组件 js 文件中，使用properties选项声明获取的数据，进行绑定属性的拦截，即接收来自父组件的数据。
● 子向父传递数据
○ 父组件在调用子组件时，使用bind:自定义事件 监听子组件触发的自定义事件，并在父组件中定义回调方法接收数据。
○ 在子组件中使用 this.triggerEvent(事件名,数据,事件选项) 触发自定义事件。
● 注：小程序的页面page也可以视为自定义组件
● 示例代码：

# component.wxml
<!-- 
  组件间数据传递
 -->
<view class="title">父组件向子组件传递数据</view>
<!-- 调用子组件时，通过自定义属性的方式传递数据 -->
<comp-1 msg="{{ msg }}"></comp-1>

<view class="title">子组件向父组件传递数据</view>
<!-- 调用子组件时，监听子组件触发的自定义事件 -->
<comp-1 bind:subevent="doGet"></comp-1>

# component.js
Page({
  data: {
    flag: true,
    btnName: '显示/隐藏',
    msg: 'welcome'
  },
  doComp(){
    this.setData({
      flag:!this.data.flag
    })
  },
  doGet(e){
    console.log(e.detail)
  }
})

# comp-1.wxml
<view class="box">
  <view>hello</view>
  <!-- 展示父组件的数据 -->
  <view>msg: {{ msg }}</view>
  <!-- 触发自定义事件按钮 -->
  <button type="primary" bindtap="doEvent">触发自定义事件</button>
</view>

# comp-1.js
Component({
  /**
   * 组件的属性列表
   * 接收组件被调用时传入的数据属性
   * 注：properties中定义的变量是用来接收数据的，可以在页面中直接访问，用法类似于data
   */
  properties: {
    msg:{
      type:String, // 属性的类型
      value:'默认值' // 属性的初始值
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    info:'欢迎'
  },

  /**
   * 组件的方法列表
   */
  methods: {
    doEvent(){
      // 触发自定义事件，参数：事件名、数据、事件选项
      this.triggerEvent('subevent',{
        info:this.data.info
      },{
        bubbles:true
      });
    }
  },

  /**
   * 组件的生命周期
   */
  lifetimes: {
    created(){
      console.log('组件被创建......'); // 此时还不能调用 setData
    },
    attached(){
      console.log('组件进入页面节点树......'); // 常用
      // 组件加载完成时自动触发事件，传递数据
      this.triggerEvent('subevent',{
        info:this.data.info
      },{
        bubbles:true
      });
    },
    detached(){
      console.log('组件从页面节点外移除......');
    }
  }
})