什么是插槽
在 Vue.js 中，插槽是一种特殊的占位符，可以在父组件中定义，然后在子组件中使用。插槽的作用是让父组件可以向子组件传递任意内容，包括 HTML、组件、数据等等。
插槽的使用方式
在父组件中，可以使用 slot 标签定义插槽。例如：
<template>
<div>
<slot></slot>
</div>
</template>在子组件中，可以使用 slot 标签引用父组件定义的插槽。例如：
<template>
<div>
<h1>子组件标题</h1>
<slot></slot>
</div>
</template>这样，父组件中的内容就会被插入到子组件的 slot 标签中。
插槽的具名和作用域
在父组件中，可以使用 slot 标签的 name 属性定义具名插槽。例如：
<template>
<div>
<slot name="header"></slot>
<slot></slot>
<slot name="footer"></slot>
</div>
</template>在子组件中，可以使用 slot 标签的 name 属性引用具名插槽。例如：
// www.javascriptcn.com code example
<template>
<div>
<slot name="header">
<h1>默认标题</h1>
</slot>
<h2>子组件内容</h2>
<slot name="footer"></slot>
</div>
</template>此外，在子组件中，可以使用 slot-scope 属性来定义插槽的作用域。例如：
// www.javascriptcn.com code example
<template>
<div>
<slot name="header" v-bind:user="user">
<h1>{{ user.name }}</h1>
</slot>
<h2>子组件内容</h2>
<slot name="footer"></slot>
</div>
</template>这样，在父组件中使用具名插槽时，可以传递一个对象作为参数，并在子组件中使用 slot-scope 属性来接收这个对象。例如：
// www.javascriptcn.com code example
<template>
<div>
<my-component>
<template slot="header" slot-scope="{ user }">
<h1>{{ user.name }}</h1>
</template>
</my-component>
</div>
</template>插槽的实例演示
下面是一个具有头部、内容和尾部三个插槽的子组件的示例代码：
// www.javascriptcn.com code example
<template>
<div>
<div class="header">
<slot name="header"></slot>
</div>
<div class="content">
<slot></slot>
</div>
<div class="footer">
<slot name="footer"></slot>
</div>
</div>
</template>在父组件中，可以使用具名插槽和作用域插槽传递数据和组件。例如：
// www.javascriptcn.com code example
<template>
<div>
<my-component>
<template slot="header">
<my-header :title="title"></my-header>
</template>
<template slot-scope="{ items }">
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
</template>
<template slot="footer">
<my-footer></my-footer>
</template>
</my-component>
</div>
</template>
<script>
import MyComponent from './MyComponent.vue'
import MyHeader from './MyHeader.vue'
import MyFooter from './MyFooter.vue'
export default {
components: {
MyComponent,
MyHeader,
MyFooter
},
data () {
return {
title: '父组件标题',
items: [
{ id: 1, name: 'item1' },
{ id: 2, name: 'item2' },
{ id: 3, name: 'item3' }
]
}
}
}
</script>插槽的指导意义
插槽是 Vue.js 中非常重要的一个特性，它可以让我们更加灵活地组合和复用组件。使用插槽，可以将组件的内部结构和外部数据分离开来，从而实现更好的可维护性和可读性。同时，插槽还可以让我们实现更加复杂的组件间通信，例如父子组件之间的多层嵌套、兄弟组件之间的通信等等。
因此，在开发 Vue.js 应用时，我们应该充分利用插槽这一特性，将组件的复杂度降低到最小，同时提高代码的可复用性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d90c32a941bf7134079775