推薦答案

　　說說對(duì)插槽的理解

　　回答：

　　1、插槽的作用：

　　插槽是用來處理組件的內(nèi)容的。插槽決定了組件的內(nèi)容放在組件模板的何處。插槽使用的是vue官方提供的組件來完成的。

　　2、vue中的插槽分為：

　　1)、單個(gè)插槽

　　在組件中只有一個(gè)插槽時(shí)，插槽不用起名字。默認(rèn)的名字是：default

　　示例：

//1、定義組件
let book = {
        template: `
            <div>     
               <p>我是上p</p>
                 <!--這是插槽，該組件的內(nèi)容將會(huì)渲染在此處 -->
               <slot></slot> 
               <p>我是下p</p>
            </div>
        `,
    }

//2、父組件的模板
<div id="box">        
    <book>
       <!--放在組件book標(biāo)簽的內(nèi)容，最終會(huì)渲染在book標(biāo)簽的<slot>處。-->
       <img src="imgs/2.jpg" />
    </book>
</div>

      2)、具名插槽

　　但組件中的插槽多于一個(gè)時(shí)，就需要給組件起名字，用名字來區(qū)分不同的插槽。用官方組件slot的name屬性給插槽起名字

　　格式：

//1、組件：
    let book = {
        template: `
            <div>     
               <p>我是上p</p>
                <!--具名插槽，該插槽起名為s1-->
               <slot name="s1"></slot> 
               <p>我是中p</p> 
                <!--具名插槽，該插槽起名為s2-->
               <slot name="s2"></slot>
               <p>我是下p</p>
            </div>
        `,
    }

//2、父組件模板里：

<div id="box">
    <book>
        <!--以下內(nèi)容插在name為s1的插槽處-->
        <template v-slot:s1>
            <img src="imgs/2.jpg" />
        </template>
        <!--以下內(nèi)容插在name為s2的插槽處-->
        <template v-slot:s2>
            <div>我是div</div>
        </template>
    </book>
</div>

上一篇

React.memo的使用場(chǎng)景

下一篇

媒體查詢是什么