微信小程序——插槽、父子组件通讯

---

前言

今天我们一起看一下小程序中的插槽和父子组件相互通讯方面的内容，来看一下和vue有什么样的区别？

---

一、插槽

1. 什么是插槽？

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

其实插槽, 说的通俗一些, 就是 子组件挖坑，父组件填坑 的过程。由父组件在使用子组件的时候, 决定子组件内部的某一些布局展示

• 子组件通过挖坑
• 父组件通过组件标签中间的内容来填坑

2. 单个插槽

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

• 默认情况下，一个组件的 wxml 中只能有一个 slot
• 需要使用多 slot 时，可以在组件 js 中声明启用
• 注意：小程序中目前只有默认插槽和多个插槽，暂不支持作用域插槽

代码如下（示例）：

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

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

3. 启动多个插槽

在小程序的自定义组件中，需要使用多 插槽时，可以在组件的 .js 文件中

代码如下（示例）：

Component({
   
  options: {
   
    multipleSlots: