浅析小程序中的插槽、父子组件通讯的几种方式

1. 什么是小程序中的插槽？

小程序中的插槽是用来在组件中预留内容节点的一种方式。它类似于HTML中的<slot>标签，允许在组件内部的特定位置插入子节点。我们可以使用插槽来实现父组件向子组件插入内容的功能。以下是插槽的基础使用方式：

//在组件wxml文件中定义一个插槽，名字为“mySlot”
<slot name="mySlot"></slot>
//在父组件wxml文件中，在myComponent组件内插入内容
<myComponent>
  <view slot="mySlot">
    这是插入的内容
  </view>
</myComponent>

1.1 插槽默认值

插槽可以设置默认值，当父组件没有传入插槽内容时，就会显示默认值。以下是使用默认值的方式：

//在组件wxml文件中定义一个插槽，设置默认值为“这是默认值”
<slot name="mySlot">这是默认值</slot>
//在父组件wxml文件中，在myComponent组件内不传入内容
<myComponent></myComponent>

1.2 多个插槽

一个组件中可以有多个插槽，每个插槽可以有不同的名字。以下是定义多个插槽的方式：

//在组件wxml文件中定义两个插槽，分别为“header”和“content”
<slot name="header"></slot>
<slot name="content"></slot>
//在父组件wxml文件中，分别插入内容到两个不同的插槽中
<myComponent>
  <view slot="header">
    这是头部
  </view>
  <view slot="content">
    这是内容
  </view>
</myComponent>

2. 小程序中的父子组件通信

父子组件之间的通信，在小程序中是很常见的需求。下面我们就来介绍一些小程序中常用的父子组件通信方式。

2.1 使用properties属性传递数据

在小程序中，我们可以使用properties属性向子组件传递数据。以下是一个简单的示例：

//自定义组件myComponent
Component({
  properties: {
    text: { //父组件向子组件传递的数据名字
      type: String, //数据类型
      value: "" //数据默认值
    }
  }
})
//在父组件wxml文件中，使用myComponent组件并向其传递数据
<myComponent text="这是传递的数据"></myComponent>

2.2 使用setData方法更新父组件数据

在子组件中，我们可以使用this.triggerEvent('eventName', data)方法触发一个自定义事件并向父组件传递数据，父组件可以在对应的bind:eventName函数中接收到数据并更新数据状态。

//自定义组件myComponent
Component({
  methods: {
    onClickButton: function() {
      this.triggerEvent('myEvent', { data: '来自子组件的数据' })
    }
  }
})
//在父组件wxml文件中，使用myComponent组件，监听“myEvent”事件并更新数据状态
<myComponent bind:myEvent="onMyEvent"></myComponent>
Page({
  data: {
    message: '暂无数据'
  },
  onMyEvent: function(event) {
    this.setData({
      message: event.detail.data
    })
  }
})

2.3 使用this.selectComponent方法调用子组件方法

在父组件中，我们可以使用this.selectComponent('#id')方法获取到子组件实例，并调用子组件的方法。以下是一个示例：

//自定义组件myComponent
Component({
  methods: {
    myMethod: function(data) {
      console.log('子组件收到消息：' + data)
    }
  }
})
//在父组件wxml文件中，使用myComponent组件，并调用子组件方法
<myComponent id="myComponentId"></myComponent>
Page({
  onShow: function () {
    var component = this.selectComponent('#myComponentId')
    component.myMethod('来自父组件的消息')
  }
})

以上就是小程序中常用的插槽和父子组件通信方式的介绍。在实际开发中，根据需求的不同，可能还会使用其他的方式来实现组件之间的通信。