关于vue.js:Vue中slot的使用

集体了解：
是对组件的扩大，通过slot插槽向组件外部指定地位传递内容，通过slot能够父子传参；

开发背景(slot呈现时为了解决什么问题)：
失常状况下,<Child><span style=”color:red;”>hello world</span></Child>在组件标签Child中的span标签会被组件模板template内容替换掉，当想让组件标签Child中内容传递给组件时须要应用slot插槽；

Slot的艰深了解

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

Slot应用
1、组件中有单个或多个未命名slot标签时，如下：
<Child><span style=”color:red;”>hello world</span></Child>

<template>

<div>

<slot></slot>

<slot style=”color:blue;” >这是在slot上增加了款式</slot>

<slot name=”mySlot”>这是领有命名的slot的默认内容</slot>

</div>

</template>

会输入：两个红色的hello world，以及一个应用slot的默认内容

留神：在slot标签增加款式有效。领有命名的插槽不能被不含slot属性的标签内容替换，会显示slot的默认值（具名slot具备对应性）；

2、组件中有多个命名的slot插槽时，能够实现父组件对子组件的指定地位显示内容或传参，如下：

<Child>

<span slot="header">hello world</span>

<span slot="main">hello world</span>

<span slot="footer">hello world</span>

<span slot="other">{{otherData}}</span>

</Child>

<template>

<div>

<slot name=”header”>这是领有命名的slot的默认内容</slot>

<slot name=”main”>这是领有命名的slot的默认内容</slot>

<slot name=”footer”>这是领有命名的slot的默认内容</slot>

<slot name=”other”>这是领有命名的slot的默认内容</slot>

</div>

</template>

3、作用域插槽！！：
应用时候子组件标签<Child>中要有<template scope=”scopeName”>标签，再通过scopeName.childProp就能够调用子组件模板中的childProp绑定的数据，所以作用域插槽是一种子传父传参的形式，解决了一般slot在parent中无法访问child数据的去问题；

作用域插槽代表性的用例是列表组件，容许在parent父组件上对列表项进行自定义显示，如下该items的所有列表项都能够通过slot定义后传递给父组件应用，也就是说数据是雷同的，不同的场景页面能够有不同的展现形式：

<ul>

  <slot name="item" v-for="item in items" :text="item.text" :myname="item.myname" >     slot的默认内容  </slot>

</ul>

<Child>

  <template slot="item" scope="props">    <li>{{props.myname}}</li>  </template>

</Child>