二十九、Vue之插槽

一、适用场景

  当子组件需要根据父组件传递的DOM元素来决定显示界面时，待传递的DOM元素就可以放到插槽中传递给子组件。

二、案例演示

（一）具名插槽

  下面就是插槽的一种模式：“具名插槽”
父组件：

<template>
  <div id="app">
    <div id="nav">
      <v-slot>
        <!-- 传递DOM元素 -->
        <div slot="header"><h2>我是头部</h2></div>
        <div slot="footer"><h2>我是尾部</h2></div>
      </v-slot>
    </div>
  </div>
</template>

<script>
import Slot from './views/Slot.vue'
export default {
  data() {},
  methods: {},
  components: {
    "v-slot": Slot
  }
}
</script>

子组件：

<template>
    <div id="slot">
        <!-- 名为header的插槽 -->
        <slot name="header"></slot>
        <div>{{msg}}</div>
        <!-- 名为footer的插槽 -->
        <slot name="footer"></slot>
    </div>
</template>
<script>
export default {
    data() {
        return {
            msg: '我是一个组件'
        }
    }
}
</script>

（二）作用域插槽

  当子组件做循环或某一部分它的DOM结构应该由外部传递进来的时候，需要使用作用域插槽。步骤如下：

1、在子组件中申明作用域插槽

  数据由子组件提供，但是如何显示则由父组件规定！

<template>
    <div id="slot">
        <ul>
            <!-- 申明 “作用域插槽”，并向父组件传递值 -->
            <slot v-for="item of list" :item=item></slot>
        </ul>
    </div>
</template>
<script>
export default {
    data() {
        return {
            msg: '我是一个组件',
            list: [1,2,3,4]
        }
    }
}
</script>

2、在父组件中申明作用域插槽，并传递显示样式

<template>
  <div id="app">
    <div id="nav">
      <!-- 
        1、父组件在调用子组件时，给子组件传递了一个插槽 slot，插槽中是一个template 节点（固定写法）
        2、这个插槽要申明从子组件接收的数据要放到哪里，比如本案例就是放到 slot-scope="props" 中
        3、还需要告诉子组件如何展示，比如：<h1>{{props.item}}</h1>
      应用场景：当子组件做循环或某一部分它的DOM结构应该由外部传递进来的时候
       -->
      <v-slot>
        <!-- props：自定义属性，用于接收子组件slot中传递的数值 :item=item -->
        <template slot-scope="props">
            <h1>{{props.item}}</h1>
        </template>
      </v-slot>
    </div>
  </div>
</template>

<script>
import Slot from './views/Slot.vue'
export default {
  components: {
    "v-slot": Slot
  }
}
</script>