最新要闻

广告

手机

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

家电

天天快看点丨vue3 | slots

来源:博客园

一、什么是插槽

插槽就是子组件中的提供给父组件使用的一个占位符,用表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的标签,父组件填充的内容称为插槽内容


【资料图】

  • 子组件不提供插槽时,父组件填充失效
  • 父组件无填充时,中的备用内容会启用生效
  • 父级模板里的所有内容都是在父级作用域中编译的,子模板里的所有内容都是在子作用域中编译的,互不影响

二、匿名插槽(默认插槽)

介绍

在外部组件没有提供任何内容的情况下,可以使用匿名插槽提供默认内容。

使用场景

比如MyComponent.vue

    这是一个默认展示的内容//组件使用

如下:

如果外部组件提供了插槽内容,我们提供的内容会覆盖掉默认的内容

如下:

加入一段文字

注:插槽内容可以是任意合法的模板内容,不局限于文本。

如下:

  加入一个按钮

三、具名插槽

介绍

元素带有 name 属性的插槽被称为具名插槽。

使用场景

作用于一个组件中拥有多个插槽,而name相当于插槽的标识,用来给各个插槽分配唯一的 ID。

MyComponent.vue

  组件相关内容      

外部引用该组件

        

v-slot可以简写成#

                            

现在