插槽Slots及具名插槽实现组件高度定制化

<slot> 元素是一个插槽出口 (slot outlet)，标示了父元素提供的插槽内容 (slot content) 将在哪里被渲染。

简单来说就是预留位置(父级向子组件传递数据)

父级向子组件传值叫单向数据流

Slot插槽:一个插槽叫插入插槽

先创建一个子组件里面放几个区域,创建2个父级,并放入父级中,由于只有中间区域不一样,其他都一样,所以在子组件里中间区域写一个slot元素,在父级里可以写不同的信息,从而两个父级调用同一个字组件并输出不同的数据

具名插槽:在子组件有两个或两个以上的slot元素标签就是具名插槽,因为两个都有具体的名字了

首先在子组件slot元素里定义一个name,父级按照name对子组件进行操作

父级这边template标签来进行操作

两个父级之间可以做到互不干扰,各自输出不同的数据信息

父级则使用子组件定义的name属性名来进行操作

原本使用v-slot方法来进行调用子组件的name属性名,但后来可以简化使用#符合代替即可

第二个父级一样的调用方法,可以输出不同的信息