vue 循环slot （slot-scope）

水一更 哈哈哈

楼上的错误是多次利用slot的时候出现的

第一次的时候觉得弄成具名就好了 然后发现 貌似循环没办法弄具名

然后就暗骂作者， 你丫的这是几个意思。。

然后发现了作用域插槽

slot-scope

slot重用的话， 在父组件

嵌套里添加一个 template slot-scope="props"

例如：

好了， 没问题了 。。

其实我还想再说两句。

恩

就是

其实吧

我所以用他是因为， props修改， 父组件控制check有点肯定， 虽然父组件可以控制子组件， 但是刚刚好这丫的会修改当前的值， 也就是无法在v-model里面使用。 然后用solt修改check的作用指向问题。

好了

要不再说点什么吧

好 说点什么就说点什么。

其实也可以子组件不负责循环。 只是一开始设计是这样， 又不是很想改。

-- 完蛋了 --

---END--

什么是插槽？

在vue中通过slot可以向组件中指定位置插入内容。

插槽的通俗理解就是是“占坑”，在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑（替换组件模板中<slot>位置），当插槽也就是坑<slot name=”mySlot”>有命名时，组件标签中使用属性slot=”mySlot”的元素就会替换该对应位置内容。

首先是单个插槽，单个插槽是vue的官方叫法，但是其实也可以叫它默认插槽，或者与具名插槽相对，我们可以叫它匿名插槽。因为它不用设置name属性。

单个插槽可以放在组件任意位置， 但是一个组件有且只能有一个单个插槽 ，相对应的，具名插槽就可以有很多个。

匿名插槽没有name属性，所以是匿名插槽，那么，插槽加了name属性，就变成了具名插槽。具名插槽可以在一个组件中出现N次，出现在不同的位置。下面的例子，就是一个有两个具名插槽和单个插槽的组件，这三个插槽被父组件用同一套css样式显示了出来，不同的是内容上略有区别。

匿名插槽和具名插槽都是在父组件中定义内容与样式，子组件只是负责放在哪。但是如果子组件提供数据，那这样的话需要子组件的<slot>把数据传递给父组件，父组件只需要提供样式即可。

在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在 文档中 的 attribute。

子组件

父组件

这种情况是如果要父组件在子组件中插入内容 ，必须要在子组件中声明slot 标签 ，如果子组件模板不包含<slot>插口，父组件的内容<p>{{msg}}</p>将会被丢弃。

当slot存在默认值<slot><p>默认值</p></slot>，且父元素在<slotshow></slotshow>中没有要插入的内容时，会显示<p>默认值</p>（p标签会去掉），当slot存在默认值，且父元素在<child>中存在要插入的内容时，则显示父组件中设置的值，

具名slot

<slot>元素可以用一个特殊的属性 name 来配置如何分发内容。多个 slot 可以有不同的名字。具名 slot 将匹配内容片段中有对应 slot 特性的元素

<p slot="my-body">插入<slot name="my-body">中，<p>我是其他内容</p>插入<slot>中，而<p slot="my-footer">被丢弃

如果没有默认的 slot，这些找不到匹配的内容片段也将被抛弃

<p>我是其他内容</p>和<p slot="my-footer">都被抛弃

作用域插槽

作用域插槽是一种特殊类型的插槽，用作使用一个 (能够传递数据到) 可重用模板替换已渲染元素。

在子组件中，只需将数据传递到插槽，就像将 props 传递给组件一样

在父级中，具有特殊属性 scope 的 <template>元素必须存在，表示它是作用域插槽的模板。scope 的值对应一个临时变量名，此变量接收从子组件中传递的 props 对象.

如果渲染以上结果，得到的输出是

【列表组件】

作用域插槽更具代表性的用例是列表组件，允许组件自定义应该如何渲染列表每一项

---