一、什么是插槽？
用一段通俗的话来说就是，把一个html模板插入子组件的指定位置，插槽存在于父子组件之间。
<slot>
元素作为承载分发内容的出口。正常来说，父组件引入的子组件标签内是无法插入内容的，如下：
<template>
<div class="main-page">
<div>父组件</div>
<div style="border:1px solid red"></div>
<child>需要插槽才能渲染的内容</child>
</div>
</template>
<script>
import child from '@/components/child.vue'
export default {
name: "workplace1",
components: {
child
},
data() {
return {}
},
created() {
},
mounted() {
},
methods: {},
watch: {},
filters: {}
}
</script>
<style >
.main-page {
}
</style>
二、匿名插槽
上面的内容，我们使用插槽就可以显示：
父组件：
<template>
<div class="main-page">
<div>父组件</div>
<div style="border:1px solid red"></div>
<child>需要插槽才能渲染的内容</child>
</div>
</template>
<script>
import child from '@/components/child.vue'
export default {
name: "workplace1",
components: {
child
},
data() {
return {}
},
created() {
},
mounted() {
},
methods: {},
watch: {},
filters: {}
}
</script>
<style >
.main-page {
}
</style>
子组件child.vue：
<template>
<div>子组件
<p>子组件的插槽位置：</p>
<slot></slot>
</div>
</template>
<script>
export default {
data() {
return {}
}
}
</script>
<style>
</style>
二、具名插槽
上面是子组件中只有一个地方需要分发内容，如果是多个地方呢，每个地方放的内容都不一样，那不具名插槽必然无法实现，就需要具名插槽去一一对应每个地方放什么内容
父组件：
<template>
<div class="main-page">
<div>父组件</div>
<div style="border:1px solid red"></div>
<child>
<div slot="name1">需要插槽才能渲染的内容1111</div>
<div slot="name2">需要插槽才能渲染的内容222</div>
</child>
</div>
</template>
<script>
import child from '@/components/child.vue'
export default {
name: "workplace1",
components: {
child
},
data() {
return {}
},
created() {
},
mounted() {
},
methods: {},
watch: {},
filters: {}
}
</script>
<style >
.main-page {
}
</style>
子组件：
<template>
<div>子组件
<p>子组件的插槽位置1：</p>
<slot name="name1"></slot>
<p>子组件的插槽位置2：</p>
<slot name="name2"></slot>
</div>
</template>
<script>
export default {
data() {
return {}
}
}
</script>
<style>
</style>
三、域插槽
作用域插槽其实就是组件之间的插槽需要传值。
<template>
<div class="main-page">
<div>父组件</div>
<div style="border:1px solid red"></div>
<!-- 第一次使用子组件 -->
<child>
<template slot-scope="userdatas">
<div style="color: red;">{{userdatas.data}}</div>
</template>
</child>
<!-- 第二次使用子组件 -->
<child>
<template slot-scope="userdatas">
<div style="color: blue;">{{userdatas.data}}</div>
</template>
</child>
</div>
</template>
<script>
import child from '@/components/child.vue'
export default {
name: "workplace1",
components: {
child
},
data() {
return {}
},
created() {
},
mounted() {
},
methods: {},
watch: {},
filters: {}
}
</script>
<style >
.main-page {
}
</style>
子组件：
<template>
<div>子组件
<p>子组件的插槽位置1：</p>
<!-- 作用域插槽 -->
<slot :data="userdatas"></slot>
</div>
</template>
<script>
export default {
data() {
return {
userdatas: '詹姆斯'
}
}
}
</script>
<style>
</style>
或者和具名插槽一起使用：
<template>
<div class="main-page">
<div>父组件</div>
<div style="border:1px solid red"></div>
<!-- 第一次使用子组件 -->
<child>
<template slot-scope="userdatas" slot="name1">
<div style="color: red;">{{userdatas.data}}</div>
</template>
<template slot-scope="userdatas" slot="name2">
<div style="color: blue;">{{userdatas.data}}</div>
</template>
</child>
<!-- 第二次使用子组件 -->
<!-- <child>
<template slot-scope="userdatas">
<div style="color: blue;">{{userdatas.data}}</div>
</template>
</child> -->
</div>
</template>
<script>
import child from '@/components/child.vue'
export default {
name: "workplace1",
components: {
child
},
data() {
return {}
},
created() {
},
mounted() {
},
methods: {},
watch: {},
filters: {}
}
</script>
<style >
.main-page {
}
</style>
子组件：
<template>
<div>子组件
<p>子组件的插槽位置1：</p>
<!-- 作用域插槽 -->
<slot :data="userdatas" name="name1"></slot>
<slot :data="userdatas" name="name2"></slot>
</div>
</template>
<script>
export default {
data() {
return {
userdatas: '詹姆斯'
}
}
}
</script>
<style>
</style>
还有例如iview和elementui的表格组件都使用了作用域组件，下面的slot-scope也可以替换为v-slot