vue插槽slot

插槽

• vue为了组件封装者提供的能力，允许开发者在封装组件时把不确定的，希望由用户指定的部分定义为插槽
• 也是一种封装组件时的占位符

---

基本用法

• 子组件创建一个插槽

<template>
  <div class="left-container">
    <h3>Left 组件</h3>
	<hr>
	<!-- 声明一个插槽区 -->
	<!-- vue官方规定：每个slot插槽，都要有一个name名称 -->
	<!-- 如果省略了name属性则有一个默认名称 default -->
	<slot></slot>
  </div>
</template>

• 父组件插入

<template>
  <div class="app-container">
    <h1>App 根组件</h1>
    <hr />

    <div class="box">
		<Left>
			<!-- 如果Left组件内未声明slot将不会被渲染到页面上 -->
			<p>这是left组件内的插槽</p>
		</Left>
    </div>
   </div>
</template>
 

<script>
import Left from './components/Left.vue'
import Right from './components/Right.vue'
export default {
	components: {
		Left,
		Right
	}
} 
</script>

v-slot指令

• 可以将我们的内容指定到固定的插槽中去
• v-slot只能用在template身上 用法：v-slot:default
• template是虚拟的标签，不会被渲染到组件树中

<template v-slot:default>
	<p >这是left组件内的插槽</p>
</template>

插槽内的默认内容

• 如果插槽内没有内容则会显示slot标签内的默认内容

<slot name="default">这是插槽内的default内容</slot>

• 当用户没有指定的时候才会生效，指定之后就会被覆盖

<Left>
	<!-- 如果Left组件内未声明slot将不会被渲染到页面上 -->
	<!-- 默认情况下提供的内容被填充到default的插槽中 -->
	<!--<template #default>
		<p >这是left组件内的插槽</p>
	</template>-->
</Left>

具名插槽的定义和使用

• 在子组件里面定义多个插槽

<template>
	<div class="article-container">
		<!-- 文章标题 -->
		<div class="header-box">
			<slot name="header"></slot>
		</div>
		<!-- 文章内容 -->
		<div class="content-box">
			<slot name="content"></slot>
		</div>
		<!-- 文章作者 -->
		<div class="footer-box">
			<slot name="footer"></slot>
		</div>
	</div>
</template>

<script>
	export default{
		name:'Article'
	}
</script>

• 在父组件里面通过template 的v-slot或者#来绑定相应的名称

<template>
  <div class="app-container">
    <h1>App 根组件</h1>
    <hr />
	<Article>
		<template #header>
			<h1>一首诗</h1>
		</template>
		<template #content>
			<h1>二首诗</h1>
		</template>
		<template #footer>
			<h1>三首诗</h1>
		</template>
	</Article>
   </div>
</template>
 

<script>
import Article from './components/Article.vue'
export default {
	components: {
		Article
	}
} 
</script

作用域插槽的用法

• 在封装组件时，为预留的<slot>提供对应的属性，这种用法叫做“作用域插槽”
• 插槽在定义时可以传递点儿数据给父组件 msg="hello-vue.js"

<div class="content-box">
	<slot name="content"  msg="hello-vue.js"></slot>
</div>

• 父组件中接收

<template #content='scope'>
	<h1>二首诗</h1>
	<p>{{scope}}</p>
</template>

插槽的解构赋值

• 可以在父组件的templa标签上进行解构赋值拿到封装组件slot标签上属性

---

• 子组件

<template>
	<div class="article-container">
		<!-- 文章标题 -->
		<div class="header-box">
			<slot name="header"></slot>
		</div>
		<!-- 文章内容 -->
		<div class="content-box">
			<slot name="content"  msg="hello-vue.js" :user="userInfo"></slot>
		</div>
		<!-- 文章作者 -->
		<div class="footer-box">
			<slot name="footer"></slot>
		</div>
	</div>
</template>

<script>
	export default{
		name:'Article',
		data(){
			return {
				userInfo:{
					name: 'zs',
					age: 18,
					sex: '男'
				}
			}
		}
	}
</script>

• 父组件

<template #content='{msg,user}'>
	<h1>二首诗</h1>
	<p>{{msg}}</p>
	<p>{{user}}</p>
</template>