Vue3 具名插槽的使用方法

2,427 阅读1分钟

今天做项目过程中,我一个需求是在含有标题和内容的输入框内,可设定标题或内容的字体粗细。插入自定义标题和内容需要用插槽 <slot />即可轻松实现,但是我又需要单独给我的标题内容文字加粗该怎么办?

用具名插槽<slot name="xxx" />即可

  • 首先到需要插到插槽里的内容处,改用 <template v-slot:xxx></template>包裹
    (代码中的 <Dialog /> 为需要插进内容的组件) 如下图所示(外部组件):

image.png

  • 然后在需要插进内容的组件里,写上具名插槽<slot name="xxx" />,如下图所示:

image.png

  • 完成

image.png