四。插槽，Attribute 继承

插槽

在Vue3中，用template标签包裹要填充的内容，v-slot属性也需定义在template标签上，只有一种例外情况，就是默认插槽
v-slot:的语法糖是#，但后面必须有插槽名，例如v-slot:default 等价于 #default
插槽有三种

默认插槽

//父组件 (Child外层有templat>div标签，此处省略，方便观看)

//也可以是这样，属于例外情况
//父组件

具名插槽

//父组件

//子组件

作用域插槽

作用域插槽的作用即延展子模板中数据的作用域，使得在父级模板中也可使用子模板中的数据
//父组件

//子组件

插槽的实现原理(/过程)：

当子组件vm实例化时，获取到父组件传入的slot标签的内容，存放在vm.slot.default，具名插槽为vm.slot中的内容进行替换，此时可以为插槽传递数据，若存在数据，
则可称该插槽为作用域插槽

参考：

Vue入门之slot属性 - (jianshu.com)

「2021」高频前端面试题汇总之Vue篇 （上） (juejin.cn)

vue2到vue3中插槽slot变化详解---从slot，slot-scope到v-slot的变化_marendu的博客-CSDN博客

Attribute 继承

通过将 inheritAttrs 选项设置为 false，你可以访问组件的 $attrs property，该 property 包括组件 props 和 emits property 中未包含的所有属性 (例如，class、style、v-on 监听器等)

父组件

子组件

渲染完成显示结果