Vue.js 是当今最流行的前端框架之一，看到很多文章都有关于 Vue.js中 slot 和scoped slot的介绍。本文将详细介绍Vue.js 2.x中 slot和scoped slot的作用，以及如何使用它们来更好地实现前端开发。
slot和scoped slot的作用
在 Vue.js组件化的思想中，一个组件可以看作一个独立的封装单元，在设计组件时要考虑到其可复用性。如果一个组件中的内容不是固定不变的，那么我们就需要方法来扩展这个组件的内容。这个时候就可以使用Vue.js的插槽机制：slot 和scoped slot。
slot
Vue.js中的slot可以理解为一个组件本身并不包含任何内容，只是一个容器，让用户可以自定义模板的内容。我们可以在一个组件中定义一组slot，然后在使用组件的时候将要插入的内容使用 slot 插入到对应的位置，从而达到扩展组件内容的效果。
比如以下这个组件，它定义了一个slot：
<template>
<div>
<slot>默认内容</slot>
</div>
</template>这个组件的显示效果和内容和默认的模板有关，而默认模板的内容是可以通过使用这个组件的时候提供的插槽内容来扩展的。例如下面这段代码：
<my-component> <p>插入的内容</p> </my-component>
最终页面显示的是：
<div> <p>插入的内容</p> </div>
scoped slot
scoped slot 是 Vue.js 2.x 中新增的属性，该属性让父组件可以很方便地将数据传递给子组件，并让子组件以数据为依据来渲染输出效果。
可以将 scoped slot 理解为一个函数，这个函数带有某些参数，我们可以在函数内部使用这些参数来实现自定义内容的渲染。scoped slot 指定了子组件如何渲染其内容以及取得需要的数据，从而让子组件和父组件之间更加高效灵活的通信。
使用示例
接下来，我们会通过实际的代码示例来更加深入的理解 slot 和 scoped slot 的使用方法。
示例1：slot
以下是一个父组件：
<template>
<div>
<h2>{{title}}</h2>
<slot></slot>
</div>
</template>这个组件渲染一个标题，然后提供一个slot，将要插入的内容插入到 div 标签内。下面来看如何使用该组件。
在父级组件中，可以使用：
<shared-component title="标题"> <p>插入的内容</p> </shared-component>
在“shared-component” 组件中的slot中插入的内容就是“插入的内容”。
示例2：scoped slot
以下是一个父组件：
// javascriptcn.com 代码示例
<template>
<div>
<h2>{{title}}</h2>
<slot :message="message"></slot>
</div>
</template>
<script>
export default {
name: 'shared-component',
data() {
return {
title: 'scoped slot 示例',
message: 'Hello Vue.js'
};
}
};
</script>这是一个带有scoped slot的父组件，并且这个slot接受一个名为 message 的prop，该 props 数据在父级组件声明并以变量形式传入到slot中。在以上示例中，我们让父组件将 "message" 的值传递到子组件，然后子组件会使用这个 message 渲染其内容。
在子组件中，我们可以这样来使用它：
// javascriptcn.com 代码示例
<template>
<div>
<h2>{{title}}</h2>
<slot :message="message">{{ message }}</slot>
</div>
</template>
<script>
export default {
name: 'child-component',
props: ['message']
};
</script>这个子组件也是能够渲染标签，实际上我们将父级组件传入的 message 值传递给了子组件，并且在子组件中的slot上也使用了 message。这里的 message 实际上是一个 props，所以需要设置 props。
在父组件中，我们插入了子组件的标签，并且指定了message的值，最终页面上的效果就是：
<div> <h2 scoped slot 示例</h2> <div>Hello Vue.js</div> </div>
不仅仅是自定义内容，我们还可以将slot的内容封装成组件，以实现更高效的组件通信。
总结
slot 和scoped slot 是 Vue.js 提供的两种扩展组件内容的方法。slot 可以让我们在一个组件中在固定的位置提供可变的内容，scoped slot 此时进一步将数据和内容进行解耦，使得我们能够更方便、高效的使用组件。
在实际的项目中，slot 和scoped slot 很常见，当你理解了它们的使用方法之后，就可以更好的扩展 Vue.js 组件中的功能了。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652e3e9f7d4982a6ebf4b28e