【微信小程序】自定义组件（三）

自定义组件

• • • 插槽
    • • • 1、什么是插槽
        • 2、单个插槽
        • 3、定义多个插槽
    • 父子组件之间的通信
    • • • 1、父子组件之间的通信的3种方式
        • 2、事件绑定
        • 3、behaviors

插槽

1、什么是插槽

在自定义组件的wxml结构中，可以提供一个<solot> 节点（插槽），用于承载组件使用者提供的wxml结构

2、单个插槽

在小程序中，默认每个自定义组件中只允许使用一个<slot>进行占位，这种个数上的限制叫做单个插槽。

<view class="wrapper">
  <view>这里是组件的内部节点</view>
  <!-- 对于不确定的内容，可以使用<solt>进行占位，具体内容有组件的使用者决定 -->
  <slot></slot>
</view>

<!-- 组件的使用者 -->
<component-tag-name>
  <!-- 这部分内容将被放置在组件的使用者决定 -->
  <view>这里是插入到组件的slot的内容</view>
</component-tag-name>

3、定义多个插槽

<view class="wrapper">
  <!-- name为before的第一个slot插槽 -->
  <slot name="before"></slot>
  <!-- name为after的第一个slot插槽 -->
  <slot name="after"></slot>

</view>
-------------------
<component-tag-name>
  <!-- 这部分内容将被放置在组件的使用者决定 -->
  <view slot="before">这里是插入到组件的before的内容</view>
  <view slot="after">这里是插入到组件的after的内容</view>
</component-tag-name> -->

父子组件之间的通信

1、父子组件之间的通信的3种方式

1.父子组件之间通信的3种方式

①属性绑定

用于父组件向子组件的指定属 性设置数据，仅能设置JSON兼容的数据

②事件绑定

用于子组件向父组件传递数据， 可以传递任意数据

③获取组件实例

父组件还可以通过 this.selectComponent()获取子组件实例对象,

这样就可以直接访问子 组件的任意数据和方法

2、事件绑定

事件绑定用于实现子向父传值，可以传递任何类型的数据。

①在父组件的js中,定义一个函数，这个函数即将通过自定义事件的形式，传递给子组件

//再父组件中定义syncCount方法
  //将来，这个方法会被传递给子组件，使子组件进行调用
  syncCount(){
    console.log('syncCount');
  },

②在父组件的wxml中,通过自定义事件的形式，将步骤1中定义的函数引用，传递给子组件

<!-- 使用bind:自定义事件名称 -->

<my-test3 count="{{count}}" bind:sync='syncCount'></my-test3>
<!-- 或者使用bind后面直接写上自定义事件名称  -->
<my-test3 count="{{count}}" bindsync='syncCount'></my-test3>

③在子组件的js中,通过调用this.triggerEvent('自定义事件名称', {/*参数对象*/})，将数据发送到父组件

addCount(){
      this.setData({
        count:this.properties.count+1
      })
      this.triggerEvent('sync',{value:this.properties.count})
    }

④在父组件的js中，通过e.detail获取到子组件传递过来的数据

syncCount(e){
	this.setData({
		count:e.detail.value
	})
	
}

3、behaviors

behaviors是小程序中，用于实现组件间代码共享的特性，类似于Vue.js 中的"mixins"

• behaviors的工作方式

每个behavior可以包含- 组属性、数据、生命周期函数和方法。组件引用它时，它的属性、数据和方法会被合并到组件中。

每个组件可以引用多个behavior, behavior也可以引用其它behavior.

• 创建behaviors

module.exports=Behavior({
  //属性节点
  properties:{},
  //私有数据节点
  data:{usernameL:'zs'},
  //事件处理函数和自定义方法节点
  methods:{},
  // /其他节点
})

• behavior中所有可用的节点

可用的节点	类型	是否必填	描述
properties	object Map	否	同组件的属性
data	object	否	同组件的数据
methods	object	否	同自定义组件的方法
behaviors	String Array	否	引入其它的behavior
created	Function	否	生命周期函数
attached	Function	否	生命周期函数
ready	Function	否	生命周期函數
moved	Function	否	生命周期函数
detached	Function	否	生命周期函数

• 同名字段的覆盖和组合规则

组件和它引用的 behavior 中可以包含同名的字段，对这些字段的处理方法如下：

• 如果有同名的属性 (properties) 或方法 (methods)：
  1. 若组件本身有这个属性或方法，则组件的属性或方法会覆盖 behavior 中的同名属性或方法；
  2. 若组件本身无这个属性或方法，则在组件的 behaviors 字段中定义靠后的 behavior 的属性或方法会覆盖靠前的同名属性或方法；
  3. 在 2 的基础上，若存在嵌套引用 behavior 的情况，则规则为：引用者 behavior 覆盖 被引用的 behavior 中的同名属性或方法。
• 如果有同名的数据字段 (data)：
  • 若同名的数据字段都是对象类型，会进行对象合并；
  • 其余情况会进行数据覆盖，覆盖规则为： 引用者 behavior > 被引用的 behavior 、 靠后的 behavior > 靠前的 behavior。（优先级高的覆盖优先级低的，最大的为优先级最高）
• 生命周期函数和 observers 不会相互覆盖，而是在对应触发时机被逐个调用：
  • 对于不同的生命周期函数之间，遵循组件生命周期函数的执行顺序；
  • 对于同种生命周期函数和同字段 observers ，遵循如下规则：
    • behavior 优先于组件执行；
    • 被引用的 behavior 优先于 引用者 behavior 执行；
    • 靠前的 behavior 优先于 靠后的 behavior 执行；
  • 如果同一个 behavior 被一个组件多次引用，它定义的生命周期函数和 observers 不会重复执行