Vue一案详解引发对“内容分发槽”最全面的总结

今天，我们继续谈论Vue。目前我们一直在自学Vue，开始做一个实践项目。我一直认为在实战中发现问题，解决问题是最好的学习方式。因此，在学习了一些Vue理论之后，我开始在业余时间做一个项目，然后在项目中总结一些案例。

今天，我们来谈谈Vue中的内容分发槽。首先，Vue实现了一套内容分发的API。该API基于当前的Web组件规范草案，以槽元素作为承载分布式内容的出口。内容分发是Vue中一个非常重要的功能，很多第三方框架库都在使用它。

槽功能，所以掌握这个技能很重要。

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

我对槽的理解有三个优点。当然，这只是我个人的理解。如果大家有不同的理解，欢迎大家交流讨论，这样可以有不同的烟火。

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

原生HTML标签可以优雅地打包，组件标签可以嵌套，就像使用原生HTML标签一样，使组件更加通用和可重用。如果没有槽元素，当我们在组件标签中使用组件标签或者在组件标签中使用HTML原生标签时，就没有效果了，这与我们过去使用和理解的HTML是相反的。

让我们从一张图片开始，详细解释这三点。

大家都见过这个，一个标准的对话框，在项目中经常用到。我们把它画出来，做成一个组件，如下所示：

Div class=' dialog-panel ' Div class=' dialog-header ' H3 class=' title ' title/H3 button class=' close ' x/button/Div Div class=' dialog-content '这是一个标准对话框/Div class=' dialog-footer ' El-button type=' primary ' plain cancel/El-button El-button type=' primary ' ok/El-button/Div/Div首先这个组件不够灵活，内容基本上是死的。让我们以标题为例。我们希望标题可以更改，以便用户可以传入标题。那么我们如何设计这个组件呢？这就是我们今天要讲的内容分发时段。让我们稍微修改一下我们的例子。

div class=' dialog-panel ' slot/slot div class=' dialog-content '这是一个标准对话框/div class=' dialog-footer ' El-button类型=' primary '普通取消/El-button El-button类型=' primary '确保/el-button /div/div在父组件中使用它

dialog-panel div class=' dialog-header ' H3 class=' title '传入title/H3 button class=' close ' x/button/div/dialog-panel你会发现组件渲染后，slot元素会被组件中包裹的元素替换，标题的内容会从外部完全传入。

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

插槽的默认内容

此外，该插槽还支持默认内容。当我们没有任何内容从外部传送到插槽时，我们可以给插槽一个默认的显示内容。如果有外部内容，默认内容将被外部内容替换。

div class=' dialog-panel ' Slot div class=' dialog-header ' H3 class=' title '这是默认标题/H3 Button class=' close ' x/Button/div/Slot div class=' dialog-content '这是标准对话框/div class=' dialog-footer ' El-Button类型=' primary ' plain cancel/El-Button El-Button类型=' primary' ok/El-button /div/div用于父组件。当没有嵌套时，我们的组件将有一个默认的渲染标题。

对话面板//无/对话面板

如果我们在父组件中提供内容，默认内容将被替换。

对话面板div='对话-标题' H3类='标题'我是新交付的标题/H3按钮类='关闭' x/按钮/div/对话面板

命名槽

有时候，除了标题有这么高的自由度之外，我们也希望其他内容有这样的灵活性，这样用户也可以通过父组件传入。Vue为我们提供了一个方法，我们可以一次使用很多槽，然后给每个槽取一个名字，也就是给我们的槽加一个名字属性。

所以我们开始修改我们的对话框

div class=' dialog-panel ' slot name=' header '/slot slot name=' content '/slot slot name=' footer '/slot/div我们在外部使用的时候，只需要提供对应的名称，就可以渲染出我们需要的东西。

对话框-面板模板槽=' header ' div class=' dialog-header ' H3类=' title '带名称的槽/H3按钮类=' close' x/button/div/Template模板槽=' content ' div class=' dialog-content '这是一个标准对话框/div/模板槽=' footer ' div class=' dialog-footer ' El-button类型=' primary '普通取消/El-button El-button类型=' primary ' ok/El-button/div/Template/对话框-面板

我们可以看到，只要我们需要，我们可以从外部控制组件的全部内容，这给我们的组件带来了很高的灵活性。除了灵活性之外，Vue还为我提供了一个名为scope slot的用法，这使得我们的组件更加可重用。

命名槽不仅可以用于模板元素，还可以直接用于普通元素

Div插槽=' header ' class=' dialog-header ' H3类=' title '名称为/H3按钮类=' close' x/button/div范围的插槽

Scope slot是Vue中一个非常重要的功能，它使得组件的可重用性更高。然而，官方文件中对范围槽的解释是非常痛苦的。反正我看了好几遍，也不太懂。最后，我写了几个案例，意识到它可以如此强大。如果你没有我一开始理解的那么好，跟着我看下面的案例可能会有帮助。

首先，我们实现了星级评定组件

template div class=' rate-list ' span v-for='(star，index)在stars ' : key=' index ' @ click=' click start(index)' I v-bind : class='[star？off : on]'/I/span/div templatescriptorexport default { name : ' RateList '，data(){ return { off : ' El-icon-star-off '， 'el-icon-star-on '，rating : 2 }；}，methods: {单击开始(索引){ this . rating=index 1；} }，computed: { stars() { return [1，2，3，4，5]。map(值=this.rating值)；} }};/script这是我们写死的一个星级评定组件。一直用的很好，但是突然有一天，产品说这个小明星用腻了。你能换一些图标吗？我最近爱上了：的心：

所以用这个。在这一点上，您可能已经想到我们拉出了这个图标并将其放在外面，因此我们结合了刚刚学习的slot元素来修改组件。

Div class=' rate-list '插槽/插槽/div用于父组件：

stars ' : key=' index ' @ click=' click start(index)' I v-bind : class='[star？完成off : on]'/i /span/rate-list后，我们不再害怕将来更改内容。以后不管怎么改，我用的时候都可以直接从外部添加内容，但是好像出现了一些问题，因为我们的代码看起来并不优雅，而且我们把操作逻辑放在的父组件中，这显然是不友好的。最好的方法是我们只需要在父组件中直接调用它，所以作用域槽在这里起了很大的作用。让我们看看如果我们使用scope槽如何保持优雅。

div class=' rate-list ' span v-for='(star，index)在stars ' :键=' index ' @ click=' click start(index)'槽3360 star=' star '/槽/span/div用于父组件：

div class=' rate-list ' span v-for='(star，index)在star ' : key=' index ' @ click=' click start(index)'槽： star=' star '/槽/span/div中，我们可以看到我们把所有的操作逻辑都放在组件内部，而在外部我们只需要

在Vue2.5.0中，插槽范围不再局限于模板元素，而是可以用于插槽中的任何元素或组件

有些同学可能对这里的范围槽不太了解，那我就送佛祖去西方吧。让我们继续看一个例子。我们创建一个列表面板组件。

template div class=' List-box ' h1 { { title } }/h1 ul Li v-for=' List ' : key=' index ' slot : item=' item '/slot/Li/ul/div/templatescript export default { name : ' List '，props: { title: String，list: Array } }/script用于父程序集：

template div class=' tirp-wrapper ' list title=' hotel list ' : list=' list ' span slot-scope=' props ' { props . item . name } }/span/list/div/templatescriptimport list from '。/list '；导出默认{name:' trip '，components: { list }，data(){ return { list :[{name: '四季度假酒店' }，{name3360 '布宜诺斯艾利斯四季酒店' }，{ name : '孟买四季酒店' }，{。}};/脚本

让我们给每个酒店添加一些描述性的标签，也可以完美的展示出来。

template div class=' tirp-wrapper ' List title=' hotel List ' : List=' List ' div slot-scope=' props ' span { { props . item . name } }/span El-tag { { props . item . tag } }/El-tag/div/List/div/templatescriptimport List from '。/List '；导出默认{name :' trip '，components : {list}，data(){ return { list :[{name 3360 '四季度假酒店'，tag: '海滨风光' }，{name : '布宜诺斯艾利斯四季酒店'，tag: '豪华度假' }，{name: '孟买四季酒店'，tag: '优质服务' }，{ name 3360 '新加坡四季酒店'，tag:}};/脚本

随着画风的变化，我们把它变成一个消息通知列表，可以看到每篇文章的点赞数。

template div class=' tirp-wrapper ' listitle=' message notification ' : List=' List ' div slot-scope=' props ' span { { props . item . title } }/span El-badge : value=' props . item . value ' : max=' 99 ' El-button size=' mini ' I class=' fa-fa-thumbs-o-up '/I/El-button/El-badge/div/List/div/templatescript import List from '。/List '；导出默认{name :' trip '，components : {list}，data(){ return { list :[{title : ' vue，由案例引起的动画使用摘要'，value: 200}，{ Title : '由Vue案例引起的递归组件的用法'，value: 20 }，{title :' vue '由Vue案例引起的动态组件和全局事件之间的绑定摘要'，value 333330}};/脚本

可以看出，无论我们如何修改数据结构或者添加不同的内容，都可以完美地完成，只需要在外部调用时填写我们需要的内容，而不需要修改我们的子组件。

你感觉到作用在插槽上的力量和灵活性了吗？

如果用一句话来描述作用域槽，就可以让我们访问父组件中子组件的数据，就像使用props属性让子组件访问父组件的数据一样。

摘要

Slot是一个重要且非常强大的功能，它可以使我们的组件具有很大的灵活性和可重用性，而scoped slot更加强了这些特性。

范围槽是一个很难理解的地方。希望这篇文章能帮你解决问题。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。