Vue中的插槽——slot

插槽的基本使用：

组件中的插槽能使组件具有更高的扩展性。它能够抽取共性，保留不同，将共性的内容封装到组件中，不同的内容通过预留插槽的方式，留下可扩展的空间。

接下来通过一个简单的案例加以说明：

<div id="app">
  <cpn></cpn>
  <cpn></cpn>
  <cpn></cpn>
  <cpn></cpn>
</div>
<template id="cpn">
  <div>
    <h2>子组件</h2>
    <p>插槽的使用方法</p>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
  el:'#app',
  data(){
    return {
      message:'Hello'
    }
  },
  components:{
    cpn:{
      template:'#cpn',

    }
  }
})
</script>

以上代码中定义了一个子组件，通过<cpn></cpn>在Vue实例中调用了四次，运行结果如下：

 现提出如下需求：为各个组件插入不同的标签

修改代码如下：

<div id="app">
  <cpn></cpn>
  <cpn><span>span标签</span></cpn>
  <cpn><input type="text" value="input标签"></cpn>
  <cpn><button>button按钮2</button></cpn>
</div>
<template id="cpn">
  <div>
    <h2>子组件</h2>
    <p>插槽的使用方法</p>
    <!-- 预留插槽位置 在Vue实例中不指定插入标签时，显示默认标签-->
    <slot><button>默认按钮</button></slot>
  </div>
</template>

 运行结果如下： 

插槽的基本使用：组件中<slot></slot>

插槽设置默认值<slot><button>默认按钮<button></slot>

如果有多个值同时放入组件进行替换时，一起作为替换元素

具名插槽的使用：

1.为组件插槽起名字：name="name";

2.使用时指定插槽：<cpn><button slot="name"> 按钮</button></cpn>。

示例如下：

<div id="app">
  <cpn>
    <input type="text" value="input标签" slot="center">
    <span slot="left">标题</span>
    <button slot="right">按钮</button>
  </cpn>
</div>
<template id="cpn">
  <div>
    <p>具名插槽的使用</p>
    <slot name="left"><span>左边</span></slot>
    <slot name="center"><span>中间</span></slot>
    <slot name="right"><span>右边</span></slot>
  </div>
</template>

作用域插槽的使用：如何在父组件中拿到子组件中的数据进行展示 。

•  插槽绑定data属性<slot :data="datas"></slot>
• 父组件中拿到数据：<cpn><template slot-scope="slot">{{slot.data}}</template></cpn>

案例：

<div id="app">
  <cpn ></cpn>
  <cpn >
    <!-- 获取子组件中的值 -->
    <template slot-scope="slot">
      <span v-for="item in slot.data">{{item}} - </span>
    </template>
  </cpn>
  <cpn >
    <template slot-scope="slot">
      <span v-for="item in slot.data">{{item}}  ** </span>
    </template>
  </cpn>
  <cpn >
    <template slot-scope="slot">
      <span >{{slot.data.join(' - ')}}</span>
    </template>
  </cpn>
</div>

<template id="cpn">
  <div>
    <slot :data="pLanguages">
      <ul>
        <li v-for="item in pLanguages">{{item}}</li>
      </ul>
    </slot>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>

const app = new Vue({
  el:'#app',
  data(){
    return {
      message:'hello',
      isShow:true
    }
  },
  components:{
    cpn:{
      template:'#cpn',
      data(){
        return {
          pLanguages:['JavaScript','Python','Swift','Go','C++','C#']
        }
      }
    }
  }
})
</script>

运行结果：