vue插槽slot的基本使用

默认插槽

子组件：

<!-- Son.vue -->
<template>
  <div>
    <h3>我是子组件</h3>
    <!-- 这里就是定义插槽的位置 -->
    <slot> 这里插槽的后备内容，如果父组件中没有填写插槽内容，那么这里会默认显示子组件插槽的后备内容，也就是默认值</slot>
  </div>
</template>

父组件：

<!-- Father.vue -->
<template>
  <div>
    <h2>这是父组件</h2>
    <Son>
    	<h1>这里填写插槽的具体内容，这里填写什么就会在子组件插槽的位置处显示什么</h1>	
    	<p>比如这里放置一个h1标签 和 p标签 那么在子组件中就会展示这两句话</p>
    </Son>
  </div>
</template>

如果我们在插槽内填入内容并且我们没有在父组件中填写内容，那我们就可以为插槽添加默认数据，这时我们称这些为插槽的后备内容。

父组件：

<!-- Father.vue -->
<template>
  <div>
    <h2>这是父组件</h2>
    <Son></Son>
  </div>
</template>

具名插槽

如果组件中出现多个插槽，那么我们可以为这些插槽取一个具体名字.

<template>
  <div>
    <h3>我是子组件</h3>
    <!-- 这里的娃哈哈是默认内容，如果父组件没有填写内容 那么就会展示这个 如果父组件填写了内容 那么就张氏父组件内容 -->
    <header>
      <slot name="header"> whahah </slot>
    </header>
    <!-- 匿名插槽 也就是默认插槽 实际插槽名称是default -->
    <slot> </slot>
    <!-- 具名插槽 -->
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

我们通过v-slot来绑定具名插槽
父组件

<template>
  <div class="container">
    <h2>这是父组件</h2>
    <Son class="son">
      <template v-slot:header>
        我是头部插槽 --- {{user.name}}
      </template>

      我是默认插槽 --- {{user.age}}

      <template v-slot:footer>
       我是尾部插槽 --- {{user.sex}}
      </template>
    </Son>

  </div>
</template>

作用域插槽

之前我们说的两个插槽，所有的数据和样式都是父组件决定，但是作用域插槽是子组件决定数据，而父组件决定的样式，可以理解为子组件数据传递给了父组件
子组件中我们通过v-bind给插槽绑定一个属性，比如下方:hobby把hobby属性传递给父组件

<template>
  <div>
    <h3>我是子组件</h3>
    <!-- 作用域插槽 -->
    <div>
      <slot name="other" :hobby="hobby">我是父组件传递值 {{hobby}}</slot>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Son',
  data() {
    return {
      hobby: {
        food: 'cake',
        fruite: 'apple'
      }
    }
  }
}
</script>

在父组件中我们通过v-slot:other='recieveProp'来接收传递过来的数据recieveProp可以是任意的名字表示用哪个名字来接收的，这个自己决定。
父组件

<template>
  <div class="container">
    <h2>这是父组件</h2>
    <Son class="son">
      <!-- 这是作用域插槽就是带有数据的插槽，样式由父组件决定 数据由子组件决定 -->
      <!-- 这里的# 是v-slot的缩写 -->
      <template #other="revieveProp">
       这是子组件自己带的数据 {{revieveProp.hobby}}
      </template>
    </Son>
  </div>
</template>

点击查看源码