微信小程序：插槽、组件通信、获取组件实例

插槽

在组件中预留出来一个占位符，通过引用者来定义其内容。

单个插槽

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

<view>
	<slot></slot>
</view>

多个插槽

可以在 .js 中配置 multipleSlots 来实现多个插槽。

使用多个插槽时，每个插槽要有 name 属性。

• 开启多个插槽

  /* components/test/test.js */
  Component({
      options: {
          multipleSlots: true,	// 启用支持多个插槽
      },
      properties: {},
      methods: {}
  })
  

• 定义自定义组件中的插槽

  在组件中留出一个占位符，内容由引用者来定义。

  <!-- components/test/test.wxml -->
  <view>
  	<slot name='before'></slot>
  	<slot name='after'></slot>
  </view>
  

• 使用插槽

  在引入的组件预留位置插入想要的内容。

  <!-- pages/message/message.wxml -->
  <view>
  	<view slot='before'>
          <text>这里定义before插槽的内容</text>
      </view>
  	
      <view slot='after'>
      	<text>这里定义before插槽的内容</text>
      </view>
  </view>
  

父子组件通信

属性绑定

用于实现父向子传值，只能传递普通类型的数据，无法传递方法。

• 父组件

  <!-- 父组件 -->
  <my-test count="{{ count }}"></my-test>
  

• 子组件

  <!-- 子组件 -->
  <view>{{ count }}</view>
  

事件绑定

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

// 语法格式
this.triggerEvent('自定义事件名称', { 参数对象 })

父组件

1. 父组件定义的方法传递给子组件。

   /* 父组件 */
   Page({
       
   })
   

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

   <!-- 父组件 -->
   <my-test bind:sync="syncCount"></my-test>
   

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

   <!-- 子组件 -->
   <text>子组件中，count值为：{{ count }}</text>
   <button :bindtap="addCount">加1</button>
   

   /* 子组件 */
   Component({
       // 接收外部传递过来的值
       properties: {
           count: {
               type: Number,
               value: 20,	// 默认值20
           }
       },
       methods: {
           addCount() {
               this.setData({
                   count: this.properties.count + 1
               })
               // 将修改后的数据返回给父组件
               this.triggerEvent('sync', { value: this.properties.count })
           }
       }
   })
   

4. 父组件接收修改后的参数

   e.detail.属性名
   

获取组件实例

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

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

在父组件中调用 this.selectComponent('id或class选择器') ，获取子组件的实例对象，从而直接访问子组件的任意数据和方法，调用时需要传入一个选择器，例如 this.selectComponent('.my-test') 。

父组件

<!-- 父组件 -->
<view>{{ count }}</view>
<button class="test">点击</button>

/* 父组件 */
Page({
    btn() {
        cosnt child = this.selectComponent('.test')
        child.data.任意属性
        child.任意方法
        
        child.setData()
    }
})