软件测试|Vue3 - 插槽 Slots

插槽 Slots

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

在这里插入图片描述

• 插槽不仅仅可以传递数据，还可以传递视图。
• 插槽多用来封装一些组件，比如：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 文件内

编译作用域

1. 编译作用域

对应页面内容不是固定的，而是通过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>

在这里插入图片描述

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

后备内容

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

1. 后备内容

如果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>
  

  在这里插入图片描述

具名插槽

1. 具名插槽

一个不带 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>
  

  在这里插入图片描述

可以通过名字去安排视图所在的位置。

在这里插入图片描述