Vue slot usage (the easiest way to understand in history)

Named slot

//子组件
<slot name="footer"></slot>
//父组件
<child1>
        
        <span slot="footer">
            <p>我是页尾的具体内容</p>
        </span>
    </child1>

Anonymous slot

子组件
<slot></slot>
父组件
<child>多云,最高气温34度,最低气温28度,微风</child>

Scope slot

The data in the child component cannot be accessed in the parent component. The data to be displayed is still the data in the child component, but the way of display is different; the data bound in the template slot of the child component can be obtained by setting the slot-scope property. 

子组件 
<slot name="dada" up="上"></slot>
父组件
 <son>
template解释:2.1以上VUE版本可以用其他标签代替包裹
     <li solt="dada" slot-scopt="st">{
   
   {st.up}}</li> 
 </son>

 

 

Guess you like

Origin blog.csdn.net/qq_37430247/article/details/115224906