【Vue】course_2
创始人
2024-05-02 01:55:43
0

7.插槽

组件的最大特性就是 重用 ,而用好插槽能大大提高组件的可重用能力。

**插槽的作用:**父组件向子组件传递内容。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JI8FZpIm-1672136742834)(assets/34.png)]

通俗的来讲,插槽无非就是在 子组件 中挖个坑,坑里面放什么东西由 父组件 决定。

插槽类型有:

  • 单个(匿名)插槽
  • 具名插槽
  • 作用域插槽

7.1 - 插槽内容与插口

在某些场景中,我们可能想要为子组件传递一些模板片段,让子组件在它们的组件中渲染这些片段。

这里有一个 组件,可以像这样使用:

Click me! 

的模板是这样的:


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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WTdnwc4R-1672136742834)(assets/slots.dbdaf1e8.png)]

最终渲染出的 DOM 是这样:


完整案例:06_slot/42_slot.html



插槽

点击注册登录

7.2渲染作用域

插槽内容可以访问到父组件的数据作用域,因为插槽内容本身是在父组件模板中定义的。举例来说:

{{ message }}
{{ message }}

这里的两个 {{ message }} 插值表达式渲染的内容都是一样的。

插槽内容无法访问子组件的数据。Vue 模板中的表达式只能访问其定义时所处的作用域,这和 JavaScript 的词法作用域规则是一致的。换言之:

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

完整案例:06_slot/43_slot_render_scope.html



插槽

{{ msg }}{{ msg }}

7.3默认内容

在外部没有提供任何内容的情况下,可以为插槽指定默认内容。比如有这样一个 组件:


如果我们想在父组件没有提供任何插槽内容时在

现在,当我们在父组件中使用 且没有提供任何插槽内容时:


“Submit”将会被作为默认内容渲染:


但如果我们提供了插槽内容:

Save

那么被显式提供的内容会取代默认内容:


完整案例:06_slot/44_slot_default.html



插槽

点击注册

7.4具名插槽(v-slot属性,#简写)

有时在一个组件中包含多个插槽出口是很有用的。举例来说,在一个 组件中,有如下模板:

对于这种场景, 元素可以有一个特殊的 attribute name,用来给各个插槽分配唯一的 ID,以确定每一处要渲染的内容:

这类带 name 的插槽被称为具名插槽 (named slots)。没有提供 name 出口会隐式地命名为“default”。

在父组件中使用 时,我们需要一种方式将多个插槽内容传入到各自目标插槽的出口。此时就需要用到具名插槽了:

要为具名插槽传入内容,我们需要使用一个含 v-slot 指令的