软件测试|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>
  

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