编辑
1.默认插槽和具名插槽
<template>
<div class="gogo">
<Caregory title="热门游戏列表">
<template v-slot:s2></template>
<template v-slot:s1>
<ul>
<li v-for="item in address" :key="item.id">{{ item.content }}</li>
</ul>
</template>
</Caregory>
<Caregory title="今日美食城市">
<template v-slot:s2></template>
<template v-slot:s1>
<img :src="imgUrl" alt="">
</template>
</Caregory>
<caregory title="今日影视推荐">
<template v-slot:s2>
</template>
<template v-slot:s1>
<video :src="videoUrl" controls></video>
</template>
</caregory>
</div>
</template>
<script setup name="App" lang="ts">
import { reactive, ref } from 'vue';
import Caregory from './components/Caregory.vue';
let address=reactive([
{id:'sdad',content:'dsaddadas'},
{id:'sdadd',content:'dsadwadas'},
{id:'sdads',content:'dsaaaaadas'},
{id:'sdadc',content:'dsssssas'},
])
let imgUrl=ref('https://z1.ax1x.com/2023/11/19/piNxLo4.jpg')
let videoUrl=ref('http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4')
</script>
<style scoped>
.gogo{
display: flex;
justify-content: space-evenly;
}
img,video{
width: 100%;
}
</style>
当子组件只有部分结构不同的时候，父组件用插槽传递这部分结构给子组件。
<template>
<div class="category">
<h2 class="content">{{ title }}</h2>
<slot name="s1"></slot>
</div>
</template>
<script setup lang="ts" name="Caregory">
import { defineProps } from 'vue';
defineProps(['title'])
</script>
<style scoped>
.category{
background-color: aqua;
border-radius: 10px;
box-shadow: 0 0 10px;
padding: 10px;
width: 200px;
height: 300px;
}
.content{
text-align: center;
background-color: bisque;
}
</style>
子组件用slot接收，以及name可以作为标识区分不同的结构放在不同的位置。
2.作用域插槽
如果数据在子组件里面就需要通过slot传递给父的插槽接收。
<template>
<div class="game">
<slot :games="games"></slot>
</div>
</template>
<script setup lang="ts" name="Game">
import { reactive, ref } from 'vue';
let games=reactive([
{id:'sdad',content:'dsaddadas'},
{id:'sdadd',content:'dsadwadas'},
{id:'sdads',content:'dsaaaaadas'},
{id:'sdadc',content:'dsssssas'},
])
</script>
<style scoped>
.game{
}
</style>
然后父组件接收
<template>
<div class="gogo">
<Game>
<template v-slot="params">
<ul>
<li v-for="item in params.games" :key="item.id">{{ item.content }}</li>
</ul>
</template>
</Game>
<Game>
<template v-slot="params">
<ol>
<li v-for="item in params.games" :key="item.id">{{ item.content }}</li>
</ol>
</template>
</Game>
<Game>
<template v-slot="params">
<h2 v-for="item in params.games" :key="item.id">{{ item.content }}</h2>
</template>
</Game>
</div>
</template>
<script setup name="App" lang="ts">
import Game from './components/Game.vue';
</script>
<style scoped>
.gogo{
display: flex;
justify-content: space-evenly;
}
img,video{
width: 100%;
}
</style>
3.自定义ref customRef
我们有时候并不希望响应式数据一变化就更新页面。那么就需要自定义ref去定义一些数据，自定义数据的更新逻辑。
<template>
<div class="gogo">
<input v-model="msg">{{ msg }}</input>
</div>
</template>
<script setup name="App" lang="ts">
import { ref,customRef} from 'vue';
//使用customRef定义响应式数据
let initValue='你好'
let timer:number
let msg=customRef((track,trigger)=>{
return {
//msg被读取的时候调用
get(){
track()//告诉vue数据很重要 持续 关注变化就更新
return initValue
},
//msg被更新的时候调用
set(value){
clearTimeout(timer)
timer= setTimeout(()=>{
initValue=value
trigger()//通知vue数据变化了
},1000)
}
}
})
</script>
<style scoped>
</style>
4.teleport
我们在定义模态框的时候，往往希望模态框可以根据整个窗口也就是整个页面去展示位置。那么可以用这个api标签去包裹model组件然后指定根据什么进行fixed定位。
<template>
<button @click="isShow=true">展示弹窗</button>
<teleport to='body' >
<div class="model" v-show="isShow">
<h2>弹窗的标题</h2>
<h2>我是弹窗的内容</h2>
<h2 @click="isShow=false">关闭弹窗</h2>
</div>
</teleport>
</template>
<script setup name="Model" lang="ts">
import { ref } from 'vue';
let isShow=ref(false)
</script>
<style scoped>
.model{
width: 200px;
height: 200px;
background-color: aqua;
padding: 5px;
box-shadow: 0 0 5px;
text-align: center;
position: fixed;
/* 参考适口 */
left: 50%;
margin-left: -100px;
}
</style>
