Vue2中插槽的作用域

2024-11 0

官网原文链接在这里

假设<navigation-link>组件的模板中可能会写为：

<a v-bind:href="url" class="nav-link">
  <slot></slot>
</a>

在使用的时候如下：

<navigation-link>
  Clicking here will send you to: {{ url }}
</navigation-link>

这里的url是想要在父组件中使用子组件navigation-link内定义的url，这是访问不到的，因此这里的url是undefined。

这是因为在<navigation-link>组件的<slot>中，{{ url }}会在插槽内容的上下文中解析，而不是在 <navigation-link>组件的上下文中。插槽内容是在父组件的作用域内渲染的，因此{{ url }}会尝试查找父组件的url属性，而不是<navigation-link>组件的url属性。

如何正确显示 url

如果希望在<navigation-link>插槽内容中使用url，可以通过作用域插槽（Scoped Slot）来实现。将 <slot>改为带有参数的作用域插槽，将url传递给父组件使用：

<!-- navigation-link 组件模板 -->
<a :href="url" class="nav-link">
  <slot :url="url"></slot>
</a>

然后，在使用<navigation-link>的父组件中，可以通过作用域插槽接收 url：

<navigation-link>
  <template v-slot="{ url }">
    Clicking here will send you to: {{ url }}
  </template>
</navigation-link>
  • 在<navigation-link>组件中，<slot :url="url">将 url 作为插槽的作用域数据传递给父组件。
  • 在父组件中，通过<template #default="{ url }"> 使用默认插槽的缩写语法解构 url，从而可以在插槽内容中正确地显示 url 的值。

这样设置后，{{ url }} 会正确显示为 <navigation-link> 组件传递的 url。

  • Vue2