微信小程序——自定义组件、插槽

微信小程序的自定义组件

组件的使用：

**1.**在根目录创建components文件夹（与pages同级），在此文件夹下再创建一个文件夹（如test），再右键test文件夹选择新建Component，文件名建议与test同名(好管理),完成后会自动在test文件夹下生成同名的.js/.wxml/.json/.wxss四个文件

**2.**在组件的.json文件里设置usingComponents

{
  "component": true,
  "usingComponents": {
    "组件名":"/components/文件夹名/文件名"
    //如："show":"/components/show/show"
  }
}

**3.**使用组件

3.1局部使用组件：在需要使用的组件的父组件的.json文件内设置usingComponents

{
  "usingComponents": {
  //这里跟上面组件的格式一样
  "引用的组件名":"组件路径"
  }
}

3.2全局使用组件：在根目录下的app.json文件内设置usingComponents，跟局部使用的格式是一样的，但全局使用的usingComponents是和window、page是同级

数据监听器

用于监听和响应任何属性和数据字段的变化，从而执行特定的操作，类似于vue中的watch侦听器

Component({
  properties: {},
  data: {},
  methods: {},
  observers: {
  	'字段A,字段B':function(字段A的新值,字段B的新值){
  		//特定的操作
  	}
  }
})

插槽

插槽(slot)是一个节点，用于承载组件使用者的wxml结构

单个插槽：

小程序中默认是只能使用一个插槽()来进行占位。有个数限制的叫做单个插槽

组件使用者中有多个slot。也就只有第一个有效，它会将后面的slot覆盖掉

组件的.wxml文件

<!-- slot在组件展示的内容(view)的前面，因此组件的使用者所填入的内容也是在组件前面 -->
<view>
  <slot></slot>
  <view>我是单个slot</view>
</view>

组件的使用者的.wxml文件

<test4>
  <!-- view中的内容显示在组件内容的前面 -->
  <view>我是slot要显示的内容</view>
</test4>

多个插槽

需要使用多个插槽时，在组件的.js文件中设置multipleSlots

Component({
//options是与properties、data同级
  options:{
    // 值为true可以启用多插槽slot
    // 设置了多插槽，就要设置相应匹配的name属性，来区分不同的插槽
    multipleSlots:true
  }
})

组件的.wxml文件

<view>
  <!-- slot是为显示组件使用者添加的内容 -->
  <!-- 这个slot占位符的内容就是自定义的，可以留给客户来写，自由发挥，在js文件中若是没有设置multipleSlots:true，那么就只能有一个slot，有多个slot时，只显示第一个slot -->
  <!-- 根据各个插槽所在view的相对位置，使用者中内容显示的位置也是一样 -->
  <slot name="aa"></slot>
  <view>
    今天是个好日子
  </view>
  <slot name="bb"></slot>
</view>

组件使用者的.wxml文件

<!-- 组件中的slot使用来显示组件使用者要另外添加的内容,若组件中没有设置slot标签，添加的内容就显示不出来，简单来说，slot就是占位符 -->
<test4>
  <text slot="aa">我是aa插槽</text>
  <text slot="bb">我是bb插槽</text>
</test4>

父子组件之间的传值：

传值的三种方式：

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

2.事件绑定：用于子组件向父组件传递数据，可以传递任意数据

3.获取组件实例：父组件还可以通过this.selectComponent()获取子组件实例对象，这样就可以直接访问子组件的任意数据和方法

父组件：组件的使用者

子组件：组件

属性绑定实现父传子；事件绑定实现子传父

父传子：

父组件的.js文件

  // 1.在这里定义要传给子组件的数据
  data: {
    count: 200
  },

父组件的.wxml文件

<!-- 2.在父组件中绑定属性，绑定属性count的值是父组件中data中的变量count -->
<!-- 这里绑定的属性名要与子组件中properties里面的属性一致 -->
<show count="{{count}}"></show>

子组件的.js文件

  // 3.父组件properties中定义了属性,这里的属性要与父组件中的定义的属性一致
  properties: {
    count: Number
  },

子组件.wxml文件

<!-- 5.这里的count就是父组件的绑定属性，是子组件properties中的属性 -->
<view>属性绑定：父传子，传过的值为:{{count}}</view>

子传父：

1.在父组件的.js文件中，定义函数，这个函数是通过自定义事件的形式，传递给子组件

2.在父组件的.wxml中。通过自定义事件的形式，将1中定义的函数引用，传递给子组件

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

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

父组件.js文件

  // 1.在父组件js文件中定义一个函数
  syncCount(){},

父组件.wxml文件

<!-- 事件绑定 -->
<!-- 2.在父组件的wxml文件中自定义一个事件(sync),事件的值就是在.js文件中定义的函数(syncCount) -->
<!-- 格式一 -->
<show count="{{count}}" bind:sync="syncCount"></show>
<!-- 格式二 bind后面的词就是自定义的事件-->
<!-- <show count="{{count}}" bindsync="syncCount"></show> -->

子组件.wxml文件

<!-- 3.在子组件的wxml文件中，点击事件addNum来触发triggerEvent事件 -->
<button type="primary" size="mini" bindtap="addNum">count+1后传给父组件</button>

子组件.js文件

methods: {
    // 3.通调用this.triggerEvent('子组件中自定义的事件',{参数对象})，将数据发送给父组件
    // 参数对象{value:this.properties.count}中的value是可以自定义，这个value要与父组件中定义的函数中的e.detail后面的值一致
    addNum() {
      this.setData({
        count: this.properties.count + 1
      })
      this.triggerEvent('sync', { value: this.properties.count })
    }
  }

父组件.js文件

  // 4.在父组件的js中，通过e.detail获取到子组件传递过的数据
  // e.detail.value中的value就是子组件调用this.triggerEvent()中的对象中的属性value,
  syncCount(e) {
    count: e.detail.value
  },