自定义组件插槽

组件插槽

小程序提供的 slot 使得自定义组件的 AXML 结构可以使用外部调用者传来的 AXML 组装。外部调用者可以传递 AXML 给自定义组件，自定义组件使用其组装出最终的组件 AXML 结构。

默认插槽

如果调用者在组件标签之间不传递 AXML，则渲染的是默认插槽（也就是slot标签之间的内容）。而如果调用者在组件标签之间传递有 AXML，则使用其替代默认插槽，进而组装出最终的 AXML 以供渲染。

代码演示

组件中使用插槽slot

<!-- /components/index/index.axml -->
<view>
  <slot>
    <view>default slot & default value</view>
  </slot>
  <view>other</view>
</view>

在页面配置文件中注册组件

{
   "usingComponents": {
     "my-component": "/components/index/index"
   }
}

页面中调用组件

<!-- /pages/index/index.axml -->
<my-component />

页面输出如下：

default slot & default value
other

页面调用组件时，传入插槽内容

<!-- /pages/index/index.axml -->
<my-component>
  <view>header</view>
  <view>footer</view>
</my-component>

页面输出如下：

header
footer
other

具名插槽 named slot

复杂的组件需要在不同位置渲染不同的 AXML，即需要传递多个 AXML，此时需要 named slot。 使用 named slot 后，外部调用者可以在自定义组件标签的子标签中指定要将哪一部分的 AXML 放入到自定义组件的哪个具名插槽中，而自定义组件标签的子标签中没有指定具名插槽的部分则会放入到默认插槽上。

如果仅传递了具名插槽，则默认插槽不会被覆盖。

代码演示

组件中使用具名插槽

<!-- /components/index/index.axml -->
<view>
  <slot>
    <view>default slot & default value</view>
  </slot>
  <slot name="header" />
  <view>body</view>
  <slot name="footer" />
</view>

页面中传递具名插槽

<!-- /pages/index/index.axml -->
<my-component>
  <view slot="header">header</view>
  <view slot="footer">footer</view>
</my-component>

页面输出如下：

default slot & default value
header
body
footer

页面中同时传递具名插槽与默认插槽

<!-- /pages/index/index.axml -->
<my-component>
  <view>this is to default slot</view>
  <view slot="header">header</view>
  <view slot="footer">footer</view>
</my-component>

页面输出如下：

this is to default slot
header
body
footer

props属性

使用自定义组件的 AXML，可以访问组件内部的数据，同时通过 **props 属性 **，可以访问外部调用者的数据。

步骤：

1. 给子组件以添加属性的方式传值 属性名="{{ 数据名 }}"
2. 子组件内部通过 props 接收
3. 在子组件模板中直接使用

代码演示

页面结构

// /pages/index/index.js
Page({
  data: { y: 2 },
});

页面中使用组件，并通过属性传值

<!-- /pages/index/index.axml -->
<my-component y="{{y}}" />

组件中通过props接受传过来的数据

// /components/index/index.js
Component({
  data: {
    x: 1,
  },
  props: {
    y: '',
  },
});

组件使用数据

<!-- /components/index/index.axml -->
<view>component data: {{x}}</view>
<view>page data: {{y}}</view>

页面输出如下：

component data: 1
page data: 2

注意

**props属性 **将父组件的值传给子组件仅能通过<my-component y="{{y}}" />，不支持插槽传值。

插槽传值只需要通过父组件页面中的数据绑定 {{}}

<!-- /pages/index/index.axml -->
<slotcom>
    <view >
        覆盖 default - slot - {{name}}
    </view>
    <view slot="header">
        覆盖 default - header
    </view>
</slotcom>

name是index.js中的数据

作用域插槽 slot-scope

slot scope 使得插槽内容可以访问到组件内部的数据。

代码演示

页面结构设置

// /pages/index/index.js
Page({
  data: { y: 2 },
});

页面中使用组件，并通过slot-scope获取组件内的数据

<!-- /pages/index/index.axml -->
<my-component>
  <view slot-scope="props">
    <view>component data: {{props.x}}</view>
    <view>page data: {{y}}</view>
  </view>
</my-component>

组件结构设置

// /components/index/index.js
Component({
  data: {
    x: 1,
  },
});

组件模板设置

<!-- /components/index/index.axml -->
<view>
  <slot x="{{x}}">
    <view>default slot & default value</view>
  </slot>
  <view>body</view>
</view>