Vue special usage in the slot

In the package assembly, we often want to reuse more components, which uses slot grammar, syntax common slot

1. common usage

Subassembly

<slot></slot>

Parent component tags written in the corresponding position

2. The value of the use of slot grammar acquisition sub-assemblies

Subassembly
 <slot name = " items " : Content = ' modelContent.data ' > </ slot> 

parent element
 <Template items # = ' {Content} ' > </ Template> 

receives the value transmitted subassembly, do different rendering constituent components of differentiation.

3. Use realize many slot named slot grammar

子组件
<slot name="item1"></slot>
<slot></slot>
<slot name="item2"></slot>

父组件
<template #item1></template>
<p>11111</p>
<p>22222</p>   
<template #item2></template>

 

 

 

Guess you like

Origin www.cnblogs.com/lcglcglcglcglcg/p/11305025.html