默认插槽和具名插槽

最新推荐文章于 2024-06-20 23:05:39 发布

wmt-xbyg

最新推荐文章于 2024-06-20 23:05:39 发布

阅读量832

点赞数

分类专栏：前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_44269412/article/details/121389988

版权

前端专栏收录该内容

32 篇文章 0 订阅

订阅专栏

1、默认插槽

定义一个组件camera，组件内部

<template>
<div>
<h3>分类</h3>
//占位
<solt>我是默认值，当使用组件时内部没有小东西，我显示</solt>
</div>
</template>

使用组件时

<Camera>
<h3>组件内部包含的内容会放入组件内部的solt便签内，不传则默认显示solt标签内的内容</h3>
</Camera>

1、具名插槽
基于默认插槽，若当放入多个标签时

定义一个组件camera，组件内部

<template>
<div>
<h3>分类</h3>
//占位
<solt name="center">我是默认值，当使用组件时内部没有小东西，我显示</solt>
<solt name="footer">我是默认值，当使用组件时内部没有小东西，我显示</solt>
</div>
</template>

使用组件时

<Camera>
<h3 solt="center">组件内部包含的内容会放入组件内部的solt便签内，不传则默认显示solt标签内的内容</h3>
// 可放多个进行追加
<img  solt="footer" src=""></img>
<img  solt="footer" src=""></img>
</Camera>