14.Vue 插槽

1.分类

        1.默认插槽

        2.具名插槽

        3.作用域插槽

2.默认插槽

子组件通过slot标签来确定DOM渲染的位置，当父组件没有往插槽里传任何值时，则渲染子组件默认的值

//子组件
<template>
  <div>
    <slot>默认插槽</slot>
  </div>

</template>

<script>
export default {

}
</script>


//父组件
<template>
  <div>
    <child-view>
      <div>默认的插槽</div>

    </child-view>

  </div>
</template>

<script>
import ChildView from './ChildView.vue'
export default {
  components: { ChildView }

}
</script>

3.具名插槽

在子组件预定好slot的名称，在父组件中使用插槽时利用name指定使用哪一个插槽

//子组件
<template>
  <div>
    <slot name="h1">具名插槽</slot>
  </div>

</template>

<script>
export default {

}
</script>


//父组件
<template>
  <div>
    <child-view>
      <!-- 第一种写法 -->
      <!-- <template #h1>
        使用具名插槽
      </template> -->

      <!-- 第二种写法 -->
      <div slot="h1">使用具名插槽</div>
    </child-view>

  </div>
</template>

<script>
import ChildView from './ChildView.vue'
export default {
  components: { ChildView }

}
</script>

4.作用域插槽

作用域插槽比具名插槽就多了一个参数，利用作用域插槽子组件可以向父组件传值，记住

//子组件
<template>
  <div>
    <slot name="h1" :title="title">具名插槽</slot>
  </div>

</template>

<script>
export default {
  data () {
    return {
      title: '这是子组件的标题'
    }
  }
}
</script>


//父组件
<template>
  <div>
    <child-view>
      <template v-slot:h1="slotProps">
        {{ slotProps.title }}
      </template>
    </child-view>

  </div>
</template>

<script>
import ChildView from './ChildView.vue'
export default {
  components: { ChildView }

}
</script>