插槽相关知识

1、定义：

插槽（Slot）是vue为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。

可以把插槽认为是组件封装期间，为用户预留的内容的占位符。

// App.vue
<template>
	<div>
       <my-com>
           <p>用户自定义的内容</p>
       </my-com>
    </div>
</template>

// MyCom.vue
<template>
	<p>这是MyCom组件的第一个P标签 </p>
	<slot></slot>
	<p>这是MyCom组件的最后一个P标签 </p>
</template>

2、具名插槽：对插槽进行命名，没有name的话，name默认就是default,外层一定要用<template>标签包裹

具名插槽也有简写形式，如：v-slot:header简写为：#header

// MyArticle.vue
<template>
	<div>
        <header>
            <slot name="header"></slot>
    	</header>
        <main>
            <slot></slot>
    	</main>
        <footer>
            <slot name="footer"></slot>
    	</footer>
    </div>
</template>

// App.vue
<template>
	<div>
        <my-article>
            <template v-slot:header>
                <h1>滕王阁序</h1>
			</template>
			<template #header>
                <h1>滕王阁序</h1>
			</template>
			<template v-slot:default>
                <p>豫章故郡，洪都新府。</p>
				<p>豫章故郡，洪都新府。</p>
				<p>豫章故郡，洪都新府。</p>
			</template>
			 <template v-slot:footer>
                <p>落款：徐文晶</p>
			</template>
    	</my-article>
    </div>
</template>

3、作用域插槽：在组件封装过程中，可以为预留的<slot>插槽绑定props数据，这种带有props数据的<slot>叫做 作用域插槽。

// MyTest.vue
<template>
	<div>
        <slot :info="infomation" :msg="message" name="default"></slot>
    </div>
</template>
<script>
    export default {
        data(){
            information: {
                phone: '13425397982',
                address: '广州'
            },
            msg: '第181s'
        }
    }
</script>

// App.vue
<template>
	<div>
        <template v-slot:default="scope">
            <p>{{ scope }}</p> // 相当于是渲染了 {{information}} 和 {{msg}}
		</template>
    </div>
</template>

4、结构作用域插槽的 prop

// App.vue
<template>
	<div>
        <template #default="{info,msg}">
            <p>{{ info.phone }}</p> // 相当于是渲染了 {{information.phone}}
            <p>{{ msg }}</p>
		</template>
    </div>
</template>

5、插槽作用域应用场景

// MyTable.vue
<template>
    <div>
		<thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>State</th>
    		</tr>
        </thead>
        <tbody>
            <tr v-for="item in list" :key="item.id">
                <slot :user="item" name="default"></slot>
    		</tr>
    	</tbody>
    </div>
</template>

// App.vue
<template>
	<div>
        <my-table>
            <template #default="{ user }">
                <td>{{user.id}}</td>
                <td>{{user.name}}</td>
                <td>
                    <input type="chechbox" :checked="user.state" />
    			</td>
			</template>
    	</my-table>
    </div>
</template>