Vue3-渗透属性-插槽

透传属性：

指的是传递给一个组件，却没有被该组件声明为 props 或 emits 的属性。

合并：如果子组件已经有一个class或者style属性，那么会和父组件透传的属性进行合并。

原生事件继承：如果此时子组件模板也绑定了该事件，则父子会同时被触发。同时，透传也符合深层组件继承的特点。

取消继承：如果你不想要一个组件自动的继承属性，可以在子组件的选项中设置：inheritAttrs: false。

插槽：

      和HTML元素一样向组件中传递内容，Vue提供了插槽来实现这样的需求。

基础用法：

      步骤一：定义子组件模板,在内容部分使用来占位

      步骤二：父组件中向插槽添加内容

      以上组件在渲染的时候，会将子组件Child元素中的“占位符” 替换掉。

插槽内容与出口：

      父组件 Father 中的模板，子组件元素（开闭标签）中的内容为插槽内容，而的模板中的是插槽出口。元素是一个插槽出口 (slot outlet)，标示了父元素提供的插槽内容 (slot content) 将在哪里被渲染。

      插槽内容可以是任意合法的模板内容，不局限于文本，甚至是组件。通过使用插槽， 组件更加灵活和具有可复用性。现在组件可以用在不同的地方渲染各种不同的内容，但同时还保证都具有相同的样式。

渲染作用域：

      插槽内容可以访问到父组件的数据作用域但无法访问子组件的数据，因为插槽内容本身是在父组件模板中定义的。

默认内容：

      在外部没有提供任何内容的情况下，可以为插槽指定默认内容。比如我们在父组件没有提供任何插槽内容时在<strong>后渲染“ 系统异常，请稍后再试！ ”，只需要把“ 系统异常，请稍后再试！ ”写在<slot>标签之间来作为默认内容。

具名插槽：

      步骤一：在父组件Father中使用子组件BaseLayout时.为具名插槽传入内容

      步骤二：在子组件 BaseLayout 中定义具名插槽（header、footer）

动态插槽名:

作用域插槽:

      Vue提供了一个作用域插槽，可以向子组件传递 props 那样，向一个插槽的出口传递属性。子组件决定插槽的内容，父组件决定插槽内容的布局。

      基础用法：

      第一步：传递数据：在子组件（BaseLayout.vue）中的 slot 元素中增加要传递的数据。

页面展示：