当前位置：首页 > news >正文

vue3 组合式API：插槽

news 来源：原创 2025/5/23 0:26:48

一、内容与出口

1、<slot> 元素是一个插槽出口 (slot outlet)，标示了父元素提供的插槽内容 (slot content) 将在哪里被渲染。插槽内容可以是任意合法的模板内容，不局限于文本

<FancyButton>
  Click me! <!-- 插槽内容 -->
</FancyButton>



// <FancyButton> 的
<button class="fancy-btn">
  <slot></slot> <!-- 插槽出口 -->
</button>



// 最终渲染出的 DOM 是这样：
<button class="fancy-btn">Click me!</button>

二、渲染作用域

1、插槽内容可以访问到父组件的数据作用域，因为插槽内容本身就是在父组件模板中定义的

//两个 {{ message }} 插值表达式渲染的内容都是一样的
<span>{{ message }}</span>
<FancyButton>{{ message }}</FancyButton>

2、插槽内容无法访问子组件的数据。Vue 模板中的表达式只能访问其定义时所处的作用域，换言之：父组件模板中的表达式只能访问父组件的作用域；子组件模板中的表达式只能访问子组件的作用域。

三、默认内容：在外部没有提供内容的情况下，可以为插槽指定默认内容。

//例如：<SubmitButton> 组件

<button type="submit">
  <slot></slot>
</button>

//如果想在父组件没有提供插槽内容时，在<button>内渲染 “Submit” ，只需将 “Submit”放在<solt>
//标签之间，来作为默认内容


<button type="submit">
  <slot>
    Submit <!-- 默认内容 -->
  </slot>
</button>


上述案例就可以在父组件中没有提供内容时 <SubmitButton /> 被渲染成 
<button type="submit">Submit</button>


//但是如果提供了内容Save，那么显示提供的内容就会取代默认内容
<SubmitButton>Save</SubmitButton>
//渲染成：
<button type="submit">Submit</button>