slot

1、插槽的基本使用

//--------子组件com.vue-----------
<template>
  <div>
    <h3>Com 组件</h3>
    <p>插槽开始</p>
    
    <!-- 为组件的使用者预留的区域 -->
    <slot></slot>
    
    <p>插槽结束</p>
  </div>
</template>

//---------父组件------------
<template>
  <div>

    <h1>App 组件</h1>
    <!-- 使用子组件 -->
    <Com>
      <!-- 指定需要向子组件的插槽区域放入的元素 -->
      <!-- 需要放入插槽的元素写在组件标签内 -->
      <div>插槽的内容</div>
    </Com>

  </div>
</template>

<script>
import Com from './子组件'

export default {
  components: {
    Com
  }
}
</script>

//---------结果------------
<h1>App 组件</h1>
<h3>Com 组件</h3>
<p>插槽开始</p>
<div>插槽的内容</div>
<p>插槽结束</p>

2、没有预留插槽 组件标签内的内容会被丢弃

//--------子组件com.vue-----------
<template>
  <div>
    <!-- <slot></slot> -->
  </div>
</template>

//---------父组件------------
<template>
  <div>
    <Com>
      <div>插槽的内容</div>
    </Com>
  </div>
</template>

<script>
import Com from './子组件'

export default {
  components: {
    Com
  }
}
</script>

//---------结果------------
自定义内容都会被丢弃，不会显示‘<div>插槽的内容</div>’

3、后备内容

//--------子组件com.vue-----------
<template>
  <div>
    <!-- 为组件的使用者预留的区域 -->
    <slot>
      <div>插槽的后备内容</div>
    </slot>
  </div>
</template>

//---------父组件------------
<template>
  <div>
     <!-- 使用子组件 -->
    <Com>
      <!-- 指定需要向子组件的插槽区域放入的元素 -->
      <!-- 需要放入插槽的元素写在组件标签内 -->
      <!-- <div>插槽的内容</div> -->
    </Com>
  </div>
</template>

//---------结果------------
<div>插槽的后备内容</div>

4、具名插槽

//--------子组件com.vue-----------
<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
  </div>
</template>

//---------父组件------------
<template>
  <div>
    <Com>
      
      <!-- <template #header>  简写 -->
      <template v-slot:header>     
        <div>头部区域</div>
      </template>

      <template v-slot:default>
        <div>默认区域</div>
      </template>

    </Com>
  </div>
</template>

5、作用域插槽

//--------子组件com.vue-----------
<template>
  <div>
    <slot name="jwl" :infomation="info" :message="msg"></slot>
  </div>
</template>
export default {
  data() {
    return {
      info: {
        name: 'zs',
        age: 23
      },
      msg:'hello'
    }
  }
}
</script>
//---------父组件------------
<template>
  <div>
    <Com>
        <template #jwl="val" >
            {{ val }}
        </template>
    </Com>
  </div>
</template>
//---------结果------------
{ "infomation":  {"name":"zs","age":23} } 
{ "message":  {"ms":"hello"} }