Vue组件：插槽

 Vue 组件系列文章：

《Vue组件：创建组件、注册组件、使用组件》

《Vue组件：使用Prop实现父组件向子组件传递数据》

《Vue组件：使用$emit()方法监听子组件事件》

《Vue组件：插槽》

《Vue组件：混入》

《Vue组件：动态组件、缓存组件、异步组件》

《Vue组件：依赖注入provide和inject的使用》

《Vue组件：模板引用ref属性的使用》 

在实际开发中，子组件往往只提供基本的交互功能，而内容是有父组件来提供的。为此，Vue.js 提供了一种混合父组件内容和子组件模板的方式，这种方式称为内容分发。

1、基本用法

Vue.js 参照当前 Web Components 规范草案实现了一套内容分发的 API，使用 <slot> 元素作为原始内容的插槽。

【实例】插槽的基本用户。

（1）创建 ParentComponent.vue 父组件

<template>
    <fieldset>
        <legend>父组件</legend>
        <h3>父组件内容：插槽的使用</h3>

        <!-- 第三步：使用组件 -->
        <BlogSlot>
            <p>博客信息：{
  
  { blogName }}</p>
            <p>博客信息：{
  
  { blogUrl }}</p>
        </BlogSlot>
    </fieldset>
</template>

<script>
//第一步：引用组件
import BlogSlot from '@/components/BlogSlot.vue'

export default {
    data() {
        return {
            blogName: '您好，欢迎访问 pan_junbiao的博客',
            blogUrl: 'https://blog.csdn.net/pan_junbiao'
        }
    },
    //第二步：注册组件
    components: {
        BlogSlot,
    }
}
</script>

（2）