插槽的作用
可以让父组件对子组件的指定位置插入内容,插入的内容多种多样
默认插槽
- 在子组件指定位置添加 slot 标签,用来替换父组件传值的内容
- 父组件传过来的内容可以是一个字符串,也可以是标签
子组件 childList.vue
<template>
<div class="childList">
<div>{{ title }} 传入的标题</div>
<slot>插槽的默认值,调用子组件没有传内容时,会显示</slot>
</div>
</template>
<script>
export default {
name: "childList",
props: ["title"],
data() {
return {};
},
created() {},
methods: {},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
</style>
父组件 HelloWorld.vue
<template>
<div class="hello">
<div class="right">
<!-- 默认插槽 start -->
<childList title="第一个对象"> 仅仅展示一句话 </childList>
<childList title="第二个对象">
<h2>展示的是一个标签</h2>
</childList>
<!-- 默认插槽 end -->
</div>
</div>
</template>
<script>
import childList from "../pagesCom/childList.vue";
export default {
name: "HelloWorld",
components: { childList },
data() {
return {};
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
</style>
- 可看出,第一个对象只渲染了一句字符串,第二个对象渲染的是 h 标签
- 并且父子组件之间的传值 title 不受影响
具名插槽
- 子组件中可能有多个位置需要父组件指定内容,此时可以使用 name 属性进行区分
子组件 childList.vue
<template>
<div class="childList">
<div>{{ title }} 传入的标题</div>
<slot name="header">具名插槽头部默认值,调用组件没传内容时,显示</slot>
<slot name="footer">具名插槽脚部默认值,调用组件没传内容时,显示</slot>
</div>
</template>
<script>
export default {
name: "childList",
props: ["title"],
data() {
return {};
},
created() {},
methods: {},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
</style>
父组件 HelloWorld.vue
<template>
<div class="hello">
<div class="right">
<!-- 具名插槽 start -->
<childList title="第三个对象">
<h2 slot="header">展示的是一个标签,头部插槽</h2>
</childList>
<childList title="第四个对象">
<h2 slot="footer">展示的是一个标签,脚部插槽</h2>
</childList>
<!-- 具名插槽 end -->
</div>
</div>
</template>
<script>
import childList from "../pagesCom/childList.vue";
export default {
name: "HelloWorld",
components: { childList },
data() {
return {};
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
</style>
- 可看出,第三个对象,仅仅是头部插槽被替换。第四个对象,仅仅是脚步插槽被替换
作用域插槽
- 当数据在子组件中,数据展示方式不确定时,可以使用作用域插槽
- 在父组件中,可以利用 slot-scope 拟定一个对象,取到子组件中的数据,进行遍历等操作,之后再进行定制化的展示方式,如 ul-li 或 div 等
子组件 childList.vue
<template>
<div class="childList">
<div>{{ title }} 传入的标题</div>
<slot :lists="lists">作用域插槽默认内容</slot>
</div>
</template>
<script>
export default {
name: "childList",
props: ["title"],
data() {
return {
lists: ["11", "22", "33"],
};
},
created() {},
methods: {},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
</style>
父组件 HelloWorld.vue
<template>
<div class="hello">
<div class="right">
<!-- 作用域插槽 start -->
<childList title="第五个对象">
<template slot-scope="dataObj">
<ul>
<li v-for="(item,index) in dataObj.games" :key="index">
{{item}}
</li>
</ul>
</template>
</childList>
<!-- 作用域插槽 end -->
</div>
</div>
</template>
<script>
import childList from "../pagesCom/childList.vue";
export default {
name: "HelloWorld",
components: { childList },
data() {
return {};
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
</style>