推荐答案

　　说说对插槽的理解

　　回答：

　　1、插槽的作用：

　　插槽是用来处理组件的内容的。插槽决定了组件的内容放在组件模板的何处。插槽使用的是vue官方提供的组件来完成的。

　　2、vue中的插槽分为：

　　1)、单个插槽

　　在组件中只有一个插槽时，插槽不用起名字。默认的名字是：default

　　示例：

//1、定义组件
let book = {
        template: `
            <div>     
               <p>我是上p</p>
                 <!--这是插槽，该组件的内容将会渲染在此处 -->
               <slot></slot> 
               <p>我是下p</p>
            </div>
        `,
    }

//2、父组件的模板
<div id="box">        
    <book>
       <!--放在组件book标签的内容，最终会渲染在book标签的<slot>处。-->
       <img src="imgs/2.jpg" />
    </book>
</div>

      2)、具名插槽

　　但组件中的插槽多于一个时，就需要给组件起名字，用名字来区分不同的插槽。用官方组件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>
        <!--以下内容插在name为s1的插槽处-->
        <template v-slot:s1>
            <img src="imgs/2.jpg" />
        </template>
        <!--以下内容插在name为s2的插槽处-->
        <template v-slot:s2>
            <div>我是div</div>
        </template>
    </book>
</div>

上一篇

React.memo的使用场景

下一篇

媒体查询是什么