vue3 + ts 使用插槽slot

作用：

通过使用插槽让组件更加灵活和具有可复用性，使其用在不同的地方渲染不同的内容，同时保证相同的样式。

插槽作用域：由于插槽内容本身就是在父组件中定义的，所以可以访问到父组件的数据作用域，但是无法访问到自组件的数据作用域。因为vue表达式和js的词法作用域规则一样，只能访问其定义时所处的作用域。用官方文档来说就是： 

         父组件模版中的表达式只能访问父组件的作用域；子组件模版中的表达式只能访问子组件的作用域。

插槽的使用：

（1）默认插槽：又称匿名插槽。

        即外部没有提供任何内容时，为插槽提供默认内容。

（2）具名插槽：

        在一个组件中包含多个插槽出口时，使用具名插槽。元素通过唯一特殊的name，来给各插槽分配唯一的ID，来确定每一处需要渲染的内容。

        没有提供name的出口则会隐式的命名为"default"（匿名插槽）。

        父组件使用