组件化开发中的常用的插槽(slot)元素

详细请阅读官方文档——插槽官方文档

1. 什么是插槽？

  插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。

2. 插槽的使用方法

  举个例子，下面是京东app的两个界面，注意他的导航栏。

         

两个导航栏整体是几乎相同的，只有文本和一些按钮不同。我们都知道程序员不可能写两个导航栏吧，因为懒！哈哈，开个玩笑，那么这其实就是使用同一个导航栏组件，通过插槽元素实现不同的导航栏效果。

 1. 基础slot示例代码：

比如，一个弹出框组件，它有三处应用，需要更改按钮处的元素。

<template id="cpn">
    <div>
        <h2>我是子组件</h2>
        <slot><button>按钮</button></slot>
    </div>
</template>

<div id="app">
    <cpn></cpn>
    <cpn><span>不是按钮</span></cpn>
    <cpn><input type="text"></cpn>
    <cpn><h2>吃饭</h2></cpn>

</div>

运行结果 

2. 具名插槽使用方法：

 顾名思义，有名字的插槽就是具名插槽，就是我之前说的导航栏。

简单示例如下：

我有一个导航栏组件，分别把它左中右处的插槽起个name：

<template id="cpn">
    <div>
        <slot name="left"><span>左</span></slot>
        <slot name="center"><span>中</span></slot>
        <slot name="right"><span>右</span></slot>
    </div>
</template>

调用组件，修改指定位置的元素：

<div id="app">
    <cpn></cpn>
    <cpn><span slot="center">中被修改</span></cpn>
    <cpn><button slot="left">左被修改</button></cpn>
</div>

运行结果如下：

3.作用域插槽

理解：父组件替换插槽的标签，但是标签内容是由子组件提供的。

举个例子：子组件包括一组数据：比如，pColor:['red','green','yellow','black']; 我们要在以不同的方式显示这组数据（比如，行显示或列显示）。

通过父组件修改标签，内容还在子组件。

这就需要使用slot作用域插槽来实现。

 

代码如下：子组件

<template id="cpn">
    <div>
        <slot :data="pColor">
            <div>
                <ul->
                    <li v-for="item in pColor">{{item}}</li>
                </ul->
            </div>
        </slot>
    </div>
</template>

代码中，:data=“pColor”就是将子组件的数组存到data中。（data是名字，随便起）。

代码：父组件

<div id="app">
<cpn></cpn>
    <cpn>
<!--        2.5.x以下-->
        <template slot-scope="slot">
<!--            <span v-for="item in slot.data">{{item}}&#45;&#45;&#45;&#45;</span>-->
            <span >{{slot.data.join(' - ')}}</span>
        </template>

    </cpn>
</div>

父组件中，需要使用slot-scope属性获取刚才的data值。（同样代码中slot是名字也可以随便起）。

结果：