官方文档 https://cn.vuejs.org/v2/guide/components-slots.html
先上代码
父组件
<template>
<div class="view-container">
<div class="zs">
<p>我是父组件</p>
<HD :name="‘1223‘" :jk="jk" #default="user">
<p>{{ user }}</p>
<!-- <p>我还是默认插槽的内容</p>
<template slot="t">
<p>命名插槽</p>
</template>
<p>我是默认插槽</p>
<template slot="number" slot-scope="jw">
<p>哇哈哈{{ jk }}</p>
<h1 @click="ho">{{ jw.jw }}</h1>
</template>
<template v-slot:hj="slotProps">
<h2>kjkjjk</h2>
<p>{{ slotProps }}</p>
</template> -->
</HD>
</div>
</div>
</template>
<script>
import HD from "./hd"
export default {
data () {
return {
jk: ‘我是父组件的只‘
}
},
computed: {},
beforeMount () {
},
mounted () { },
methods: {
ho () {
console.log(jw)
console.log(‘我是父组件的事件‘)
}
},
components: {
HD
}
}
</script>
<style lang="scss" scoped>
@import ‘./index‘;
</style>
子组件
<template>
<div class="child">
<!-- <h1>我是子组建{{ name }}</h1>
<slot name="t"></slot> -->
<slot :user="jk" />
<!-- <slot name="number" :jw="jk" />
<slot name="hj" v-bind:user="jk"></slot> -->
</div>
</template>
<script>
export default {
props: {
name: {
type: String,
default: () => {
return ‘‘
}
}
},
data () {
return {
jk: ‘我是子组建的jk‘
}
},
watch: {
},
mounted () { },
methods: {
ho () {
console.log(‘我是子组件的事件‘)
},
handleChange (value) {
this.$emit(‘change‘, value)
},
}
}
</script>
<style lang="scss" scoped>
.child {
width: 100%;
border: 1px solid red;
}
</style>
正文
1. 默认插槽适用方式
父组件
<HD >
<p>我还是默认插槽的内容</p>
</HD>
子组件
<template>
<div class="child">
<slot />
</div>
</template>
2. 具名插槽
父组件 2.6之前写法
<HD>
<p>我还是默认插槽的内容</p>
<template slot="t">
<p>命名插槽</p>
</template>
<p>我是默认插槽</p>
</HD>
子组件
<div class="child">
<h1>我是子组建{{ name }}</h1>
<slot name="t"></slot>
<slot></slot>
</div>
2.6.0 版本之后 slot slot-scope(子向父传值)都被废弃 同意使用v-slot
父组件
<HD >
<template v-slot:t>
<h2>kjkjjk</h2>
<p>{{ slotProps }}</p>
</template>
</HD>
3.传值
向子插槽传值 就是父子组件传值·
子向父传值
slot-scope 已经废弃的用法
父组件
<template slot="number" slot-scope="jw"> <p>哇哈哈{{ jk }}</p> </template>
子组件
<div class="child"> <h1>我是子组建{{ name }}</h1> <slot name="number" :jw="jk" /> </div>
最新玩法
<HD :name="‘1223‘" >
<template v-slot:hj="slotProps">
<h2>kjkjjk</h2>
<p>{{ slotProps }}</p>
</template> -->
</HD>
简写
简写
<HD >
<template #hj="slotProps">
<h2>kjkjjk</h2>
<p>{{ slotProps }}</p>
</template> -->
</HD>
<HD >
<template #hj="{user}">
<h2>kjkjjk</h2>
<p>{{ slotProps }}</p>
</template> -->
</HD>
重命名
<HD >
<template #hj="{user：personal}">
<h2>kjkjjk</h2>
<p>{{ slotProps }}</p>
</template> -->
</HD>
追加
<HD >
<template #hj="{user：personal,name:‘zs‘}">
<h2>kjkjjk</h2>
<p>{{ slotProps }}</p>
</template> -->
</HD>
定义默认内容 也就是当子组件插槽没传值的时候
v-slot="{ user = { firstName: ‘Guest‘ } }"
动态插槽命名
<template v-slot:[dynamicSlotName]>
...
</template>
默认插槽简写
当只有默认插槽 当前组件上写 父组件
<HD v-slot="user"> <p>{{ user }}</p> </HD>
子组件
<div class="child"> <slot v-bind:user="jk" /> </div>
简写父组件 默认插槽 将参数写在父组件上 必须带上default
<HD #defalut="user"> <p>{{ user }}</p> </HD>
原文：https://www.cnblogs.com/jiubei/p/13344357.html