WeChat applet-the use of slot (multi-slot use)

One, create components

Create a components folder in the root project, and then create your components in it. Here we should pay attention to the choice when creating the component page: Create Component

Second, the use of component templates and slots

The component template is written in the same way as the page template. The node tree generated after the component template is combined with the component data will be inserted into the reference position of the component.

A <slot> node can be provided in the component template to carry the child nodes provided when the component is referenced

1. The use of slot

<!-- 组件模板 -->
<view class="wrapper">
  <view>这里是组件的内部节点</view>
  <slot></slot>
</view>

<!-- 引用组件的页面模板 -->
<view>
  <detailM>
    <!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
    <view>这里是插入到组件slot中的内容</view>
  </detailM>
</view>

The component name and path need to be added to the json file of the page referencing the component

It can be found here that the content we inserted into the component slot in the detail/index.wxml page has been inserted into the component

2. Use components to pass values

detail/index.wxml page, introduce the component <detailM></detailM>, set a parameter text to pass the content inside to the component, and an arr array

<view>
  <detailM text="goodsTxt页面数据" arrlist="{
   
   {arr}}">
    <!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
    <view>这里是插入到组件slot中的内容</view>
  </detailM>
</view>

The sub-component receives data:

<view class="wrapper">
<view>{
   
   {text}}</view>
<view wx:for="{
   
   {arrlist}}">{
   
   {item}}</view>
<view>这里是组件的内部节点</view>
<slot></slot>
</view>

The js part of the subcomponent is received by properties, followed by the parameter type

Page effect:

Note: Such data binding can only pass JSON compatible data. Since the basic library version 2.0.9 , you can also include functions in the data (but these functions cannot be called directly in WXML, and can only be passed to subcomponents)

3. The slot of the component wxml, used by multiple slots

Nodes can be included in the wxml of the slot component to carry the wxml structure provided by the user of the component.

By default, there can only be one slot in the wxml of a component. When you need to use multiple slots, you can declare to enable it in the component js.

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

At this time, you can use multiple slots in the wxml of this component name to distinguish between different ones .

<!-- 组件模板 -->
<view class="wrapper">
  <slot name="before"></slot>
  <view>这里是组件的内部细节</view>
  <slot name="after"></slot>
</view>

When using, use slot attributes to insert nodes into different slots.

<!-- 引用组件的页面模板 -->
<view>
  <detailM>
    <!-- 这部分内容将被放置在组件 <slot name="before"> 的位置上 -->
    <view slot="before">这里是插入到组件slot name="before"中的内容</view>
    <!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 -->
    <view slot="after">这里是插入到组件slot name="after"中的内容</view>
  </detailM>
</view>

4. Component style

wxss The style of the file corresponding to the component is only valid for the nodes in the component wxml. When writing component styles, you need to pay attention to the following points:

Components and pages referencing components cannot use id selector ( #a), attribute selector ( [a]) and tag name selector, please use class selector instead.
The use of descendant selectors ( .a .b) in components and pages that refer to components may cause unexpected behavior in some extreme cases. Please avoid using them in case of encounters.
The child element selector ( .a>.b) can only be used view between a component and its child nodes, and it may cause unexpected situations for other components.
Inherited styles, such as font , color will be inherited from outside the component to the inside of the component.
Except for inherited styles, app.wxss the styles in and the style of the page where the component is located are invalid for custom components (unless the component style isolation option is changed).

#a { } /* 在组件中不能使用 */
[a] { } /* 在组件中不能使用 */
button { } /* 在组件中不能使用 */
.a > .b { } /* 除非 .a 是 view 组件节点，否则不一定会生效 */

In addition, the component can specify the default style of the node where it is located, using the :host selector (it needs to include the developer tool support of the basic library 1.7.2 or higher).

Code example:

 :host {
  color: red;
}

Here is just a simple list of the use of some WeChat applet slots. For more information, please refer to the official document: https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html