本文最后更新于：April 1, 2022 am
Vue(读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，方便与第三方库或既有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
目录
插槽就是子组件中的提供给父组件使用的一个占位符，用 <slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的 <slot></slot>标签。
官方文档
单个插槽
组件
| <template>
<div>
<slot></slot>
</div>
</template>
<script>
export default {
name: "tsCom"
}
</script>
<style scoped>
</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
| <template>
<div id="day_1">
<tc>
<h2>填充到插槽的内容</h2>
</tc>
</div>
</template>
<script lang="ts">
import {ref, reactive,onMounted} from 'vue'
import tc from '/src/components/tsCom.vue'
export default {
components:{
tc
}
}
</script>
<style scoped>
#day_1{
margin-left: 5px;
margin-top: 5px;
}
</style>
|
多个插槽
需要给每一个插槽取名。
组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <template>
<div>
<slot name="cc1"></slot>
<slot name="cc2"></slot>
</div>
</template>
<script>
export default {
name: "tsCom"
}
</script>
<style scoped>
</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
| <template>
<div id="day_1">
<tc>
<template v-slot:cc2>
<h2>插槽2的内容</h2>
</template>
<template v-slot:cc1>
<h2>插槽1的内容</h2>
</template>
</tc>
</div>
</template>
<script lang="ts">
import {ref, reactive,onMounted} from 'vue'
import tc from '/src/components/tsCom.vue'
export default {
components:{
tc
}
}
</script>
<style scoped>
#day_1{
margin-left: 5px;
margin-top: 5px;
}
</style>
|
