vue中的插槽slot

1.插槽的基本使用

子组件中的设置插槽slot:子组件中由一个默认的元素：h2,和一个插槽：插槽中是个按钮

.插槽的默认值 <slot>button</slot>如果组件中没有自定义元素时，使用插槽的默认值

 .如果有多个值, 同时放入到组件进行替换时, 一起作为替换元素（替换插槽中的元素，原有定义的元素还在）

<template id="cpn">
    <div>
      <h2>默认h2</h2>
      <slot><button>默认值</button></slot>
    </div>
  </template>

父组件中使用子组件：（一共使用的四次子组件--插槽）

 <div id="app">
    <cpn></cpn>
    <cpn><span>哈哈哈</span></cpn>
    <cpn><i>呵呵呵</i></cpn>
    <cpn>
      <i>呵呵呵</i>
      <div>我是div元素</div>
      <p>我是p元素</p>
    </cpn>
    <cpn></cpn>
  </div>

页面显示如下：

2.具名插槽的使用：就是根据子组件中插槽的名称去改想要的内容

子组件中的3个插槽：

<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>
    <!-- 将子组件插槽名字为“center"的内容改为”标题“ -->
    <cpn><span slot="center">标题</span></cpn>
     <!-- 将子组件插槽名字为“left"的内容改为”标题“ -->
    <cpn><span slot="left">标题</span></cpn>
  </div>

3.作用域插槽的使用

子组件：

<template id="cpn">
    <div>
      <!-- 将子组件中的数据传递到slot -->
      <slot :data='pLanguage'>
        <ul>
          <li v-for="item in pLanguage">{{item}}</li>
        </ul>
      </slot>
    </div>
  </template>

父组件：

  const app = new Vue({
      el:'#app',
      data:{
        message:'你好啊',
      },
      components:{
        cpn:{
          template:'#cpn',
          data(){
            return {
              pLanguage:['javascript','python','Go','java','C#']
            }
          }
        }
      }
    })

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