Vue3 - 插槽 Slots

作者：霍格沃兹测试开发学社

2024-03-11
北京
本文字数：1692 字
阅读完需：约 6 分钟

插槽 Slots

插槽内容：<slot>
编译作用域
后备内容
具名插槽
作用域插槽

插槽不仅仅可以传递数据，还可以传递视图。
插槽多用来封装一些组件，比如：type 的切换组件。常用的组件都是用插槽来实现的。

vue 实现一套内容分发的 API，插槽通过<slot>元素作为承载分发内容的出口。

1.插槽组件不是以单标签形式结束，而是以双标签形式结束。
2.组件内的内容，就是插槽。如果什么都不操作，对应的组件的内容默认不显示。

插槽内容

插槽内容：<slot>

App.vue

<script>  //1.导入对应的vue文件  import MyComponent from './components/MyComponent.vue';  export default{    name: "App",    components:{      //2.注入对应组件      MyComponent    }  }</script><template>  <div id="app">    <!-- 3.插槽组件 不是单标签-->    <MyComponent>    </MyComponent>  </div></template><style ></style>

复制代码

MyComponent.vue

<template>  <div>    <h3>插槽</h3>    <div>      <!-- 4.插入父vue文件的MyComponent内的内容 -->        <slot>插槽内容</slot>    </div>  </div></template><script>export default {
}</script><style></style>

复制代码

App.vue 里面的插槽组件显示的内容在 MyComponent.vue 文件内

编译作用域

编译作用域

对应页面内容不是固定的，而是通过 js 业务去获取的。

<script>  //1.导入对应的vue文件  import MyComponent from './components/MyComponent.vue';  export default{    name: "App",    components:{      //2.注入对应组件      MyComponent    },    data(){      return{        msg: "我是插槽内容！！"      }    }  }</script>
<template>  <div id="app">    <!-- 3.插槽组件 不是单标签 -->    <MyComponent>      <!-- 5.文本内容通过js业务去获取 -->      <div>{{msg}}</div>    </MyComponent>  </div></template>
<style ></style>

复制代码

父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

后备内容

为插槽设置具体的后备「默认」内容很有用，它只会在没有提供内容的时候被渲染。

后备内容

如果 App.vue 内对应插槽什么值都没有传递，则在 MyComponent.vue 文件中进行定义。

App.vue

<script>  //1.导入对应的vue文件  import MyComponent from './components/MyComponent.vue';  export default{    name: "App",    components:{      //2.注入对应组件      MyComponent    },    data(){      return{        msg: "我是插槽内容！！"      }    }  }</script>
<template>  <div id="app">    <!-- 3.插槽组件 不是单标签 -->    <MyComponent>      <!-- 5.文本内容通过js业务去获取 -->    </MyComponent>  </div></template><style ></style>

复制代码

MyComponent.vue

<template>  <div>    <h3>插槽</h3>    <div>      <!-- 4.插入父vue文件的MyComponent内的内容 -->        <slot>默认值/缺省值</slot>    </div>  </div></template>
<script>export default {}</script>
<style></style>

复制代码

具名插槽

具名插槽

一个不带 name 的 <slot> 出口会带有隐含的名字“default”。

v-slot 指令只能在<template> 元素上使用

App.vue

<script>  //1.导入对应的vue文件  import MyComponent from './components/MyComponent.vue';  export default{    name: "App",    components:{      //2.注入对应组件      MyComponent    },    data(){      return{        msg: "我是插槽内容！！"      }    }  }</script><template>  <div id="app">    <!-- 3.插槽组件 不是单标签 -->    <MyComponent>      <!-- 5.文本内容通过js业务去获取 -->      <template v-slot:header>        <div>{{msg}}</div>      </template>      <template v-slot:body>        <div>我是内容</div>      </template>      <template v-slot:footer>        <div>我是底部</div>      </template>    </MyComponent>  </div></template><style ></style>