Custom components -- slots

1. In the custom component of wxml In structure , Can provide a <slot> node （ slot ）, Used to host component users wxml structure

 

 

1.2 In the applet , By default, only one is allowed in each custom component <slot> To carry on the placeholder , such Limit on the number It's called a single slot  

 

// The encapsulator of the component 
<text>components/test_1/test2.wxml</text>
<view>
<slot></slot>
</view>

// Users of components 
<test2>//test2 Insert components in the label slot The content in 
<button size="mini"> Click on </button>
</test2>

1.3 Enable multiple slots

In the custom component of the applet , Need to use <slot> Slot time , It can be found in the component's js Enabled in file

Component（{
     options:{
        multipleSlots:true// Enable multiple in the options of component definition slots Support 
    },
}）

1.4 Define multiple slots

Can be found in the .wxml Using multiple in <slot> label , In different ways name To distinguish between different slots .

<view>
<slot name="before"></slot>
<view> This is the dividing line ——————————————————******</view>
<slot name="after"></slot>
</view>

 1.5 Use multiple slots

In the use of Custom components with multiple slots when , Need to use slot attribute To insert nodes into different <slot> in

<test2>
<button size="mini" slot="before"> Click on </button>
<input type="text" slot="after" style="background-color:rgb(112, 211, 211);"/>
</test2>