玩vue的老虎机内容分发

Vue的内容分发非常适合“固定部分动态部分”的场景。固定部分可以是结构固定的，也可以是逻辑固定的，比如下拉加载，中间的内容是动态的，拉到底部会触发拉更多内容的操作，所以我们可以把下拉加载做成一个带槽的插件。

单翼缝

把Dom放在标签children里，Vue不会和你说话，也就是不会显示出来，类似反应：这个。道具。孩子们。

//此处将不显示父子span12345/span//。/children//subcomponents 3360 { children : { template : ' button，所以使用button label /button' }}你需要这样写

子项： {模板： '按钮槽/按钮槽，所以使用按钮标签/按钮' }注意这里的槽相当于一个坑，等待父组件填充，这里的槽代表上面的跨度

多槽

这里需要添加名称属性。说白了，多个槽不同于上面的单个槽，需要有对应关系。

父插槽=“name 1”子插槽名称=“name 1”

//父代子代span slot=' name1 ' 12345/span/children//children components 3360 { children 3360 { template : ' button slot name=' name 1 '/slot button label/button ' } }此处写有name 1。如果有多个，请插入多个。

使用场景

“下拉加载更多”的场景相对频繁地出现在移动端。我们知道，我们需要监听bottoming事件，bottoming操作是一样的(在后台拉数据)，分页算法也是一样的，所以我们会想到把它做成一个组件，重用这些相同的地方，让其他地方可以共享这个组件，从而减少代码量。

但是，下拉加载并不是一个完全可重用的组件，因为列表中的内容是不同的，空白页的内容(当没有内容时)也可能不同。如果要做一个组件，就必须考虑这方面的“差异”，所以我们想到用vue的内容分发槽来做。下面是我在开发过程中做的一个下拉加载，大家可以参考一下。

组件代码：

模板div插槽名称=' list ' v-if=' total 0 '/插槽插槽名称=' empty ' v-else/slot/div/templatescriptive Toast from ' lib/XL-Toast ' import Tool from ' Tool/Tool ' export default { data(){ return { page : 1，isload : false，busy: false，Is first load: false}}，props : { page size 3: { default 33: 10//显示了多少数据scrollfn，false)}，getlist(){//正在提取数据或没有数据。然后取消滚动收听如果(这。正在加载| |这个。是第一次加载(这。佩奇。total page)){文档。removeeventlistener ('scroll '，这。scrollfn，True)返回}这个。忙碌=这是真的。is loading=true//通知父组件获取更多数据。$emit('getList '，this.page，()={this。isfirstload=truethis。isloading=false this。page}，()={toast。显示(网络错误，请稍后再试)此。total=0this。isloading=false})}，Reset() {//重新拉取数据this . page=1 this . total=0 this . is loading=false this . is irstload=false this . addscrollistener(). this . getlist()}，OnScroll() {//拉取更多数据if (tool。touchbottom ()) {this。getlist ()}}}/script总之，有一些部分是想要固定的，包括js操作或者固定结构，还有一些动态的部分，所以我们要考虑使用：component slot。

插槽的意外替代用法

我做需求的时候做了一个组件，分为上下两部分。这两个部分的耦合度很高(不然我怎么把它当成一个组件呢？哈哈哈)，如下图所示：

本来C区是一个组件，然后产品突然说要把这两个部分分开，把A移到C1，把C1移到A(心里觉得憋屈)。

我在这里的第一个想法是把它分成两部分，但问题来了。这两个组件之间的耦合度以前很高。如果强行把它拆分成两个组件，这两个组件之间的交互必然会多很多。例如，如果C1更改了将影响C2的某些内容，那么C1需要触发一个事件来通知父组件，然后父组件调用C2的某个方法来更新状态。这种跨组件的通信在组件频繁交互的时候会是一场噩梦，但是我需要频繁的交互，所以如果拆分成两个组件，工作量和复杂度都会大大增加。当然可以想到Event Hub的方式来实现两个组件之间的交互，但是根本问题还没有得到实质性的解决。

那么，有什么方法可以在不拆分成两部分的情况下移动位置呢？答案是槽。以我的例子为例，我分发了A和B作为c的内容，结果是这样的：

应收/应付/应收/应收改为槽后就是这种情况

CA槽='c1'/AB槽='c2'/B/C，这样C模块不需要拆分就可以调整，用最少的成本满足需求。

摘要

Vue的插槽不仅可以用于内容分发，还可以用于位置调整。如果需要拆分组件进行位置调整，又不想拆分耦合度高的组件，可以考虑使用插槽进行位置调整。一点拙见，希望对大家有帮助。也希望大家多多支持我们。