Vue中内容分发<slot>的示例分析-创新互联

这篇文章主要介绍Vue中内容分发的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

站在用户的角度思考问题，与客户深入沟通，找到叠彩网站设计与叠彩网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：做网站、成都网站设计、企业官网、英文网站、手机端网站、网站推广、国际域名空间、网页空间、企业邮箱。业务覆盖叠彩地区。

首先 Vue 实现了一套内容分发的 API，这套 API 是基于当前的 Web Components 规范草案，将元素作为承载内分发内容的出口，内容分发是 Vue 中一个非常重要的功能，很多第三方的框架库都使用到了

功能，所以掌握这个技能是非常重要的。

它可以让我们更加优雅的使用组件。

我对的理解有三点或者说优势，当然，这个只是我个人的理解，如果你有不同理解的地方，欢迎交流讨论，这样才能碰出不一样的花火。

回到主题，我对内容分发的三点理解：

如果没有元素，当我们在组件的标签中使用组件标签或者组件标签中使用 HTML 原生标签，都是没有任何作用的，这个和我们以往使用和认识的 HTML 是相违背的。

下面我们就对这三点去做一个详细的阐述，先从一个张图开始。

Vue中内容分发<slot>的示例分析

这个大家都见过，一个标准的 dialog 对话框，项目中也经常使用到，我们把它抽出来做成一个组件如下：


 
  标题
  x

这是一个标准的 dialog 对话框

取消确定

首先这个组件不够灵活，内容基本上是写死的，就拿标题来说，我们希望标题是可以变化的，让使用者可以传递标题进来，那么我们该如何去设计我们的这个组件呢？这就是我们今天要说的内容分发了，我们小小的修改下我们的例子。

你会发现组件渲染之后，元素会被替换成组件中包裹的元素，标题的内容完全由外部传递进来。

上面我们只是嵌套了一个简单的 div 标签元素，插槽可以传入任何的元素，不管是HTML，还是组件元素。

不仅如此，插槽还支持默认内容，当我们在外部没有传递给插槽内容时，我们可以给插槽一个默认的显示内容，如果外部有内容，默认的内容将会被外部的内容替换掉。

在父组件中使用它，不嵌套任何的内容时，我们的组件就会有个默认的渲染标题。

有些时候，我们除了标题有这么高的自由度之外，我们也想其它的内容也有这样的灵活性，让使用者也能通过父组件传递进来，Vue 中给我们提供了方法，我们一次可以使用很多插槽，然后给每一个插槽起个名字，也就是给我们的添加一个 name 属性。

我们在外部使用时，只需要提供相应名称，我们就可以渲染出我们需要的

可以看到，我们在外部可以控制组件的全部内容只要我们需要，这给我们的组件带来了很高的灵活性。除了灵活性，Vue 中还给我提供了一种叫 作用域插槽 的用法，它让我们的组件更加的复用性。

{{title}}