【微信小程序】插槽的理解以及父子组件之间的通信

1.插槽

1. 什么是插槽

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

2. 单个插槽

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

4. 定义多个插槽

可以在组件的 .wxml 中使用多个 <slot> 标签，以不同的 name 来区分不同的插槽。示例代码如下：

4. 使用多个插槽

在使用带有多个插槽的自定义组件时，需要用 slot 属性来将节点插入到不同的 中。示例代码如下：

2.父子组件之间的通信

1. 父子组件之间通信的 3 种方式

① 属性绑定

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

② 事件绑定

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

③ 获取组件实例

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

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

2. 属性绑定

属性绑定用于实现父向子传值，而且只能传递普通类型的数据，无法将方法传递给子组件。父组件的示例代码

如下：

子组件在 properties 节点中声明对应的属性并使用。示例代码如下：

3. 事件绑定

事件绑定用于实现子向父传值，可以传递任何类型的数据。使用步骤如下：

① 在父组件的 js 中，定义一个函数，这个函数即将通过自定义事件的形式，传递给子组件

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

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

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