Vue3项目中使用插槽

前言：

        此文章仅记录插槽的使用，用于自己后期学习查看。

        代码实现过程中，HelloWorld为子组件，HomeView为父组件

元素：

        是一个插槽出口，是写在子组件中的，表示了父组件提供的插槽内容将在子组件哪一个位置展示。

默认插槽：

        HellowVorld组件内容：

         情况一：HomeView组件不提供插槽内容时，展示子组件默认数据。

         页面展示效果：

        

 

          情况二：HomeView组件提供插槽内容时， HelloWorld组件中元素中的内容被覆盖。

        

         页面内容展示效果：

 

具名插槽： （即元素上使用name属性用来标识插槽）

     在子组件中，通过进行占位

     在父组件中，通过 v-slot：name_value（#name_value）指定所提供的内容属于哪一个插槽

       页面展示效果：

注意！！！ Vue3中使用具名插槽，需要使用template进行包裹起来，并且在template上进行v-slot:指定插入的位置。没有被包裹在带有v-slot：的