微信自定义组件

可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似

一、基本使用

-- 目录结构 --

|_ components
 |_ br
   |_ br.js
   |_ br.wxml
   |_ br.json
   |_ br.wxss
|_ pages
 |_ index
   |_index.js
   |_index.wxml
   |_index.json
   |_index.wxss

模拟一个 <br> 标签

模板

<!--components/br/br.wxml-->
<view class="br"></view>

/* components/br/br.wxss */
.br {
  height: 10rpx;
  width: 100%
}

在 index 页面中使用

1. 声明 pages/index/index.json

{
  "navigationBarTitleText": "使用组件",
  "usingComponents": {
    "br": "../../components/br/br"
  }
}

2. 使用

<!--pages/com/com.wxml-->
<text>pages/com/com.wxml</text>
<br />
<br />
<br />
<br />
<text>Hello World</text>

运行结果

二、父子组件传值

1. 父组件向子组件传值
   与大多组件化开发一致，通过绑定一个自定义属性传递数据

<!-- 父组件 -->
<custom-header msg="这里是父组件"/>

在子组件中也要先在，页面逻辑js 文件中的 properties 中声明。

/* 子组件的 js 文件 */
 properties: {
//  msg: String /* 简要声明 */
    msg: {
      type: String,
      value: 'nothing',    /* 默认值 */ 
//    observer: function(newVal, oldVal) {} /* 属性被改变时执行的函数 */
    }
  }

然后即可以在 子组件中 进行使用

<!-- 子组件.wxml -->
<view>
  {{msg}}
</view>

2. 子组件向父组件传值
   同样类似于其他组件化开发，可以通过 绑定自定义事件的方式

<!-- 父组件.wxml -->
<custom-header bind:myEvent="handleclick"/>

类似的，需要在当前定义 handleClick 方法

// 父组件.js
  handleclick(e) {
    console.log('clicked by 父组件')
    console.log(e.detail) // detail 是子组件传递过来的数据。参见下面的代码
  },

在子组件中定义一个事件，在适当的时机使用triggerEvent来触发这个事件

<!-- 子组件.wxml -->
<view  bindtap="handleClick"> click </view>

这里定义了一个 click 事件，handleClick

最后在 handleClick 内部来触发这个自定义事件即可。

// 子组件.js
methods: {
  handleClick() {
    console.log(`click by 子组件`)
    this.triggerEvent('myEvent', {params: 2333}) 
   // 这里的第二个参数，即参数对象。在父组件中通过 e.detail 可以进行访问
  }
}

扩展：父组件调用子组件中的数据和方法

在使用组件的时候，可以给组件绑定一个 id。然后通过，selectComponent 来获取这个组件的实例，进而访问其中的数据和方法

<!-- 父组件.wxml -->

<!-- 自定义组件 custom-header -->
<custom-header id="header" />

/* 父组件.js */

onLoad() {
  const header = this.selectComponent('#header')

  header.run() // 访问子组件的方法
  console.log(header.data.message) // 访问子组件的数据
}

三、插槽

默认情况下，一个组件的wxml中只能有一个slot。需要使用多slot时，可以在组件js 的 options中声明启用。

/* 子组件.js */
Component({
  options: {
    multipleSlots: true
  }
})

在父组件中 通过 slot 属性来指定插槽的 姓名

<!-- 父组件.wxml -->
<text>Hello Alyssa</text>
<custom-header id="header">
  <view slot="s1">
    这里是第一个插槽
  </view>

  <view slot="s2">
    这里是第二个插槽
  </view>

  <view slot="s3">
    这里是第三个插槽
  </view>
</custom-header id="header" >
<text>Hello James</text>

在 子组件中 通过 slot 标签，指定 name 属性。使用对应的插槽

<!-- 子组件.wxml -->
<view>
  <slot name="s1"></slot>
  <slot name="s2" />
</view>

具名插槽