遇到问题
今天我在网上做vue开源项目的时候发现，如果要做多页面，样式该咋办？难道每个都一个一个插入吗？这样重复就是罪过，万一需求改变每个都改该多麻烦！
所以我看了vue官方文档，发现有一个slot功能
eg
<template>
<div class="nav-wrapper">
<div class="content">
111
</div>
<Nav/>
</div>
</template>
<script lang="ts">
import Vue from "vue";
export default Vue.extend({
name:'money'
});
</script>
<style lang="scss" scoped>
.nav-wrapper {
border: 1px black solid;
display: flex;
flex-direction: column;
height: 100vh;
}
.content {
overflow: auto;
border: 1px solid blue;
flex-grow: 1;
}
</style>
这是一个页面的vue文件，如果每个页面样式相似都要写这么多真的浪费时间而且不符合美观
所以我想到把重复的内容封装到一个component里面，我暂且命名为Layout
//Layout.vue
<template>
<div class="nav-wrapper">
<div class="content">
</div>
<Nav/>
</div>
</template>
<script lang="ts">
import Vue from "vue";
export default Vue.extend({
name:'Layout'
});
</script>
<style lang="scss" scoped>
.nav-wrapper {
border: 1px black solid;
display: flex;
flex-direction: column;
height: 100vh;
}
.content {
overflow: auto;
border: 1px solid blue;
flex-grow: 1;
}
</style>
而删除了这些重复内容，原本的vue就变得干净清爽多了
<template>
<p>
111
</p>
</template>
<script lang="ts">
import Vue from "vue";
export default Vue.extend({
name:'money'
});
</script>
接下来把Layout组件在全局引用后，我们遇到一个问题，如何把这个111的p标签引入到Layout组件中呢
通过不断翻阅Vue文档，找到一个方法，也就是这次的主角slot
slot
slot他只有一个属性就是
name - string，是用于命名插槽。
它的用法就是
<slot> 元素作为组件模板之中的内容分发插槽。<slot> 元素自身将被替换。
//Layout.vue
<template>
<div class="nav-wrapper">
<div class="content">
<slot></slot>
</div>
<Nav/>
</div>
</template>
这样就会把外面传进来的把slot标签代替
但是这种方法是不够全面，而且Vue文档也说已经废弃但是没有移除，那咋样才能跟好呢？因为无法针对性的插入，比如遇到不同页面样式不同就没辙了
所以我们可以采用V-slot标签
v-slot
预期：可放置在函数参数位置的 JavaScript 表达式 (在支持的环境下可使用解构)。可选，即只需要在为插槽传入 prop 的时候使用。
参数：插槽名 (可选，默认值是
default)-
限用于
<template>- 组件 (对于一个单独的带 prop 的默认插槽)
-
用法：
提供具名插槽或需要接收 prop 的插槽。
-
示例：
<!-- 具名插槽 --> <base-layout> <template v-slot:header> Header content </template> Default slot content <template v-slot:footer> Footer content </template> </base-layout> <!-- 接收 prop 的具名插槽 --> <infinite-scroll> <template v-slot:item="slotProps"> <div class="item"> {{ slotProps.item.text }} </div> </template> </infinite-scroll> <!-- 接收 prop 的默认插槽，使用了解构 --> <mouse-position v-slot="{ x, y }"> Mouse position: {{ x }}, {{ y }} </mouse-position>
跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header：
<base-layout>
<template #header>
<h1>Here might be a page title</h1>
</template>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
<template #footer>
<p>Here's some contact info</p>
</template>
</base-layout>
然而，和其它指令一样，该缩写只在其有参数的时候才可用。这意味着以下语法是无效的：
<!-- 这样会触发一个警告 -->
<current-user #="{ user }">
{{ user.firstName }}
</current-user>
如果你希望使用缩写的话，你必须始终以明确插槽名取而代之：
<current-user #default="{ user }">
{{ user.firstName }}
</current-user>
