不具名插槽
子组件：
<template>
<div>
<!--定义不具名插槽 -->
<slot></slot>
<h3>这里是不具名插槽组件</h3>
</div>
</template>
<script>
export default {
data() {
return {}
},
created() {},
mounted() {},
methods: {}
}
</script>
<style lang="scss" scoped></style>
在父组件中使用：
<template>
<div id="inforCategory-warp">
<!-- 不具名插槽 -->
<lxsolt>不具名插槽</lxsolt>
</div>
</template>
<script>
import lxsolt from './lx'
export default {
name: 'inforCategory',
components: {
lxsolt,
},
data(){
return{}
}
}
</script>
<style lang="scss" scoped>
#inforCategory-warp {
}
</style>
作用域插槽：
slot-scope使用(slot-scope绑定的是子组件的数据)：
在组件模板中书写所需slot插槽，并将当前组件的数据通过v-bind绑定在slot标签上。
在组件使用时，通过slot-scope=“scope”,接收组件中slot标签上绑定的数据。
通过scope.xxx就可以使用绑定数据了
具名插槽以及作用域插槽
子组件：
<template>
<div>
<slot name="header" :msg="name"></slot>
<h3>这里是具名插槽组件</h3>
<slot name="footer"></slot>
</div>
</template>
<script>
export default {
data() {
return {
name:'具名插槽组件'
}
},
created() {},
mounted() {},
methods: {}
}
</script>
<style lang="scss" scoped></style>
父组件：
<template>
<div id="inforCategory-warp">
<!-- 具名插槽 -->
<nameSlot>
<div slot="header" slot-scope="scope">这里是slot-scope<span style="color:red">{{scope.msg}}</span>头部</div>
<div slot="footer">这里是尾部</div>
</nameSlot>
</div>
</template>
<script>
import nameSlot from './nameSlot'
export default {
name: 'inforCategory',
components: {
nameSlot,
},
data(){
return{
msg:'具名插槽信息',
msg2:'v-slot'
}
}
}
</script>
<style lang="scss" scoped>
#inforCategory-warp {
}
</style>
v-slot以及作用域插槽
子组件：
<template>
<div>
<div class="container">
<header>
<!-- 我们希望把页头放这里 -->
<slot name="header"></slot>
</header>
<section>
v-slot组件
</section>
<footer>
<!-- 我们希望把页脚放这里 -->
<slot name="footer" :msg="msg"></slot>
</footer>
</div>
</div>
</template>
<script>
export default {
data() {
return {
msg:'vsolt作用域插槽组件'
}
},
created() {},
mounted() {},
methods: {}
}
</script>
父组件：
<template>
<div id="inforCategory-warp">
<vsolt>
<template v-slot:header>
<h2>slot头部内容</h2>
</template>
<p>直接插入组件的内容</p>
<template v-slot:footer="scope">
<h2>slot尾部内容<span style="color:red">{{scope.msg}}</span></h2>
</template>
</vsolt>
</div>
</template>
<script>
import vsolt from './v-slot'
export default {
name: 'inforCategory',
components: {
vsolt,
},
data(){
return{
msg:'具名插槽信息',
msg2:'v-slot'
}
}
}
</script>
<style lang="scss" scoped>
#inforCategory-warp {
}
</style>
文章来源：
https://www.cnblogs.com/zwd666/p/13444462.html