Vue3 - 插槽 Slots

插槽 Slots

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

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

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

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

插槽内容

1. 插槽内容：<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

• MyComponent.vue

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

}
</script>
<style>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

编译作用域

2. 编译作用域

对应页面内容不是固定的，而是通过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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

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

后备内容

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

3. 后备内容

如果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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

• MyComponent.vue

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

<script>
export default {
}
</script>

<style>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

具名插槽

4. 具名插槽

一个不带 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>
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

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

获取更多软件测试技术资料/面试题解析，请点击！