Vue.js 的语法糖 `#default`

Vue.js中的#default用于定义组件的默认插槽内容,当父组件未传递内容时显示默认内容。插槽允许父组件向子组件传递DOM内容,可定义具名或默认插槽。示例展示了如何定义和使用#default提供默认插槽内容。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

#default 是 Vue.js 中的语法糖,用于在编写组件时指定默认的插槽内容。在 Vue.js 中,插槽(slot)是一种特殊的组件内容分发方式,允许组件的父组件向其子组件传递任意 DOM 内容。

在一个组件中,可以定义多个插槽,并可以指定插槽的名称。例如,下面是一个包含两个插槽的组件:

<template>
  <div>
    <h3>Header</h3>
    <slot name="header"></slot>
    
    <h3>Content</h3>
    <slot name="content"></slot>
  </div>
</template>

上面的代码中,定义了一个名为 header 的插槽和一个名为 content 的插槽。当组件的父组件传递了 DOM 内容到这两个插槽中时,这些 DOM 内容就会分别被分发到对应的插槽中。

除了定义具名插槽外,还可以使用 #default 语法糖来定义默认的插槽内容。例如,下面是一个使用 #default 语法糖定义默认插槽内容的组件:

<template>
  <div>
    <h3>Header</h3>
    <slot name="header"></slot>
    
    <h3>Content</h3>
    <slot name="content">
      <p>No content provided</p>
    </slot>
  </div>
</template>

上面的代码中,我们在 content 插槽中使用了 #default 语法糖,并指定了一个默认的 DOM 内容(添加了一个 "No content provided" 的段落)。当父组件没有传递 DOM 内容到 content 插槽中时,将会显示这个默认插槽内容。

总之,#default 是 Vue.js 中的一个语法糖,用于指定组件的默认插槽内容。它不需要指定具名插槽,如果父组件传递了 DOM 内容到组件中,它就会显示父组件传递的内容;如果父组件没有传递内容,则显示默认的插槽内容。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值