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

<!-- 组件的封装者 --><view>  <view>这里是组件的内部节点</view>  <!-- 对于不确定的内容，可以使用<slot>进行占位，具体的内容由组件的使用者决定 -->  <slot></slot></view><!-- 组件的使用者 --><component-tag-name>  <!-- 这部分内容将被放置在组件<slot>的位置上 -->  <view>这里是插入到组件slot的内容</view></component-tag-name>

Component({  options: {    multipleSlots: true // 在组件定义时的选项中启用多 slot 支持  }，  properties: { /* ... */ },  methods: { /* ... */ }})

<!-- 组件模板 --><view>  <!-- name 为 before 的第一个 slot 插槽 -->  <slot></slot>  <view>这是一段固定的文本内容</view>  <!-- name 为 after 的第二个 slot 插槽 -->  <slot></slot></view>

// 父组件的 data 节点data: {  count: 0}// 父组件的wxml 结构<my-test3></my-test3><view>~~</view><view>父组件中，count值为：{{count}}</view>

// 子组件的 properties 节点properties: {  count: Number}// 子组件的 wxml 结构<text>子组件中，count值为：{{count}}</text>

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

<!-- 使用 bind: 自定义事件名称(推荐：结构清晰) --><my-test3></my-test3><!-- 或在 bind 后面直接协商自定义事件名称 --><my-test3></my-test3>

// 子组件的wxml结构<text>子组件中，count值为：{{count}}</text><button>+1</button>// 子组件中的 js 代码methods: {  addCount() {    this.setData({      count: this.properties.count + 1    })    this.triggerEvent('sync', {value: this.properties.count})  }}

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

// wxml结构<my-test3></my-test3><button>获取子组件实例</button>getChild() { // 按钮的tap事件处理函数  // 切记下面参数不能传递标签选择器 'my-test3',不然返回的是 null  const child = this.selectComponent('.customA') // 也可以传递 id 选择器 #cA  child.setData({ count: child.properties.count + 1 }) // 调用子组件的 setData 方法  child.addCount() // 调用子组件的 addCount 方法 }