微信小程序 自定义组件（使用以及传值）

1. 根目录新建components 文件夹
2. 在components文件中创建 hedader footer 文件（对应四个文件）
3. 页面中引入 “usingComponents”:{ 输入组件路径 } Hedder 或footer
4. 页面中显示组件
5. 组件之间通信
6. 组件中使用插槽slot
7. 组件中（启用多slot支持）

1.前面的1、2、3、4 就不详细说了，相信这是基础操作

5.组件之间通信

详细地址可以参考 微信官方文档
链接: https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html.

1.子组件调用父组件的方法
// 父组件
<Hedder bind:myevent="onMyEvent" id='header'/>
 onMyEvent: function(e){
    e.detail // 自定义组件触发事件时提供的detail对象
  }
// 子组件内容
<button bindtap="onTap">点击这个按钮将触发“myevent”事件</button>
onTap(){
 var myEventDetail = {} // detail对象，提供给事件监听函数
 var myEventOption = {} // 触发事件的选项
 this.triggerEvent('myevent', onMyEvent, myEventOption)
}
 
 2.父组件调用子组件方法
 
 可在父组件里调用 this.selectComponent ，获取子组件的实例对象。
  const child = this.selectComponent('#header')
  child.onTap()
  
 3.设置纯数据字段
 
 纯数据字段是一些不用于界面渲染的 data 字段，可以用于提升页面更新性能。从小程序基础库版本 2.8.2 开始支持。
 组件数据中的纯数据字段
 options: {
    pureDataPattern: /^_/ // 指定所有 _ 开头的数据字段为纯数据字段
  },
  4.自定义扩展组件
  自定义组件的扩展其实就是提供了修改自定义组件定义段的能力
  // beha.js
	module.exports = Behavior({
	  definitionFilter(defFie) {
	    defFie.data.from = '123'
	  },
	})
  // component.js
	Component({
	  data: {
	    from: '456'
	  },
	  behaviors: [require('beha.js')],
	  ready() {
	    console.log(this.data.from) // 此处会发现输出 behavior 而不是 component
	  }
	})
	5.组件之间传值
	  // 页面传值
	 <SciaPictur weChatUserid="{{staffclueDetail.weChatUserId}}" parenid='{{staffclueDetail.parentId}}'
      staffClueid='{{staffclueDetail.staffClueId}}'></SciaPictur>
      // 组件页面接受参数
      properties: {
	    parenid: {
	      type: Number,
	      value: 0
	    },
	    weChatUserid: {
	      type: Number,
	      value: 0
	    },
	    staffClueid: {
	      type: Number,
	      value: 0
	    },
  	},

6.组件中使用插槽

<view class="wrapper">
  <view>这里是组件的节点</view>
  <slot></slot>
</view>

 // 引用组件的页面写法
<view>
  <component-tag-name>
    <!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
    <view>这里是插入到组件slot中的内容</view>
  </component-tag-name>
</view>

7.组件中（启用多slot支持）

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

组件样式隔离
	options: {
	    styleIsolation: 'isolated'
	 }
isolated 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响（一般情况下的默认值）