Vue插槽
包含插槽的基本使用、具名插槽、匿名插槽、作用域插槽
一、插槽基本使用
使用<slot></slot>标签来预留位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>插槽的基本使用</title>
</head>
<body>
<div id="app">
<!--这样没使用插槽，显示默认信息，ref是父组件访问子组件用-->
<b-box ref="box1" >
</b-box>
<button v-on:click="outClick">点我父组件</button>
<!--
这里使用了插槽
把<button v-on:click="outClick">点我父组件</button>
替换了原本<slot></slot>的位置
-->
<b-box ref="box1" >
<button v-on:click="outClick">点我父组件</button>
</b-box>
<!--
这里使用了插槽
把<input type="text" placeholder="Please enter information">
替换了原本<slot></slot>的位置
-->
<b-box>
<input type="text" placeholder="Please enter information">
</b-box>
<!--
这里使用了插槽
<image src="https://webstatic.mihoyo.com/upload/op-public/2021/10/09/def1f2abcfc2af0bbe2e5900a60a5ee1_5699547505742166353.png"
alt="图像地址可能失效了">
</image>
替换了原本<slot></slot>的位置
-->
<b-box>
<image src="https://webstatic.mihoyo.com/upload/op-public/2021/10/09/def1f2abcfc2af0bbe2e5900a60a5ee1_5699547505742166353.png"
alt="图像地址可能失效了">
</image>
</b-box>
</div>
<template id="box">
<div style="background-color: mediumpurple;height: 500px;width: 500px">
<h2>{
{
msg}}</h2>
<!--
插槽用<slot>这里填默认信息，就是当没传入任何东西时显示的</slot>标签预留位置
-->
<slot>
##预留插槽##
</slot><br>
<button v-on:click="inClick">点我</button>
</div>
</template>
<script src="js/vue.js"></script>
<script>
const Box = {
data(){
return{
msg:'这里是子组件，里面有三条数据msg012,我使用了msg01,父组件使用了msg2',
msg1:'子组件的消息1',
msg2:'子组件的消息2'
}
},
methods:{
inClick(){
alert(this.msg1)
}
},
template:'#box'
}
const app = Vue.createApp({
data(){
return{
msg:'基础模板'
}
},
components:{
'b-box':Box
},
methods: {
outClick(){
//父组件访问子组件用this.$refs
alert(this.$refs.box1.msg2)
}
}
}).mount("#app");
</script>
</body>
</html>
显示效果
二、具名插槽和匿名插槽
1、具名插槽，
写组件时,在标签内加neme=“XXX”，
例：<slot name="header">头部内容</slot>
组件代码：
<template id="box">
<div>
<p>-----------------------</p>
<header>
<!--头部内容-->
<slot name="header">头部内容</slot>
</header>
<main>
<!--主要内容-->
<!--这里用了匿名插槽，只要name="default"就可以-->
<slot name="default">主要内容</slot>
</main>
<footer>
<!--页脚内容-->
<slot name="footer">页脚内容</slot>
</footer>
<p>-----------------------</p>
</div>
</template>
使用时，
使用代码,使用<template v-slot:header></template>
例：
<template v-slot:header>
<button v-on:click="">我是头部</button>
</template>
使用代码：
<b-box>
<template v-slot:header>
<button v-on:click="">我是头部</button>
</template>
<template v-slot:content>
<button>我是主要内容</button>
</template>
<template v-slot:footer>
<button>我是尾部</button>
</template>
</b-box>
2、匿名插槽，在标签内写name=“default”
写组件时，写<slot name="default"></slot>
例：
<slot name="default">主要内容</slot>
组件代码
<template id="box">
<div>
<p>-----------------------</p>
<header>
<!--头部内容-->
<slot name="header">头部内容</slot>
</header>
<main>
<!--主要内容-->
<!--这里用了匿名插槽，只要name="default"就可以-->
<slot name="default">主要内容</slot>
</main>
<footer>
<!--页脚内容-->
<slot name="footer">页脚内容</slot>
</footer>
<p>-----------------------</p>
</div>
</template>
使用时,可以直接写<slot></slot>
例：
扫描二维码关注公众号，回复：
15276685 查看本文章
<!--匿名插槽,在填了name="default"的地方自动填充-->
<slot>
<input name="default" type="date">
</slot>
使用代码
<b-box>
<template v-slot:header>
<button v-on:click="">我是头部</button>
</template>
<!--
<template v-slot:content>
<button>我是主要内容</button>
</template>
-->
<template v-slot:footer>
<button>我是尾部</button>
</template>
<!--匿名插槽,在填了name="default"的地方自动填充-->
<slot>
<input name="default" type="date">
</slot>
</b-box>
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>具名插槽</title>
</head>
<body>
<div id="app">
<!--
<p>如果想让这三个标签插入对应的插槽，这是错误的用法</p>
<b-box>
<h1>Header</h1>
<h2>Content</h2>
<h3>Footer</h3>
</b-box>
-->
<p>------------------</p>
<p>具名插槽的用法</p>
<b-box>
<template v-slot:header>
<button v-on:click="">我是头部</button>
</template>
<!--
<template v-slot:content>
<button>我是主要内容</button>
</template>
-->
<template v-slot:footer>
<button>我是尾部</button>
</template>
<!--匿名插槽,在填了name="default"的地方自动填充-->
<slot>
<input name="default" type="date">
</slot>
</b-box>
</div>
<template id="box">
<div>
<p>-----------------------</p>
<header>
<!--头部内容-->
<slot name="header">头部内容</slot>
</header>
<main>
<!--主要内容-->
<!--这里用了匿名插槽，只要name="default"就可以-->
<slot name="default">主要内容</slot>
</main>
<footer>
<!--页脚内容-->
<slot name="footer">页脚内容</slot>
</footer>
<p>-----------------------</p>
</div>
</template>
<script src="js/vue.js"></script>
<script>
const Box = {
data(){
return{
}
},
methods: {
},
template:'#box'
}
const app = Vue.createApp({
data(){
return{
}
},
methods:{
},
components:{
'b-box':Box
}
}).mount("#app");
</script>
</body>
</html>
运行结果
三、作用域插槽
写组件时,使用v-bind:data="变量名"来传参数
例：
<slot :data="personArr">
<ul v-for="p in personArr">
<li>{
{p}}</li>
</ul>
</slot>
使用组件时，使用v-slot:default="自定义个名字"来接收参数
然后pArr.data这样使用
例：
<b-box>
<!--{data}称为解构，意思就是取出key为data的值-->
<template v-slot:default="{data}">
<p>{
{data.join('---')}}</p>
</template>
</b-box>
全部代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作用域插槽</title>
</head>
<body>
<div id="app">
<b-box></b-box>
<p>---------------------</p>
<b-box>
<!--
v-slot:default="pArr"这里指用pArr接收下面<slot :data="personArr">传来的数据
-->
<template v-slot:default="pArr">
<p>{
{
pArr.data.join('===')}}</p>
</template>
</b-box>
<p>-----------------------</p>
<b-box>
<!--{
data}称为解构，意思就是取出key为data的值-->
<template v-slot:default="{data}">
<p>{
{
data.join('---')}}</p>
</template>
</b-box>
</div>
<template id="box">
<div style="background-color: pink;height: 200px;width: 500px;margin: 20px">
<!--这样可以动态传递personArr出去作用域-->
<slot :data="personArr">
<ul v-for="p in personArr">
<li>{
{
p}}</li>
</ul>
</slot>
</div>
</template>
<script src="js/vue.js"></script>
<script>
const Box = {
data(){
return{
personArr: ['萧炎','小医仙','萧熏儿','云韵']
}
},
template:'#box'
}
const app = Vue.createApp({
data(){
return{
}
},
components:{
'b-box':Box
}
}).mount("#app");
</script>
</body>
</html>
运行效果
总结
整理了插槽的基本使用