Vue의 스코프 슬롯을 사용하는 이유는 무엇입니까? 언제 사용하나요?

이 기사에서는 vue의 범위 슬롯에 대해 자세히 알아볼 수 있습니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

Vue 슬롯은 상위 구성 요소의 콘텐츠를 하위 구성 요소에 삽입하는 좋은 방법입니다. (학습 영상 공유: vue 영상 튜토리얼)

다음은 부모의 slot 콘텐츠를 제공하지 않는 경우, 부모 <slot> </slot>의 콘텐츠는 대체 콘텐츠로 사용됩니다. slot位的内容，刚父级<slot></slot>中的内容就会作为后备内容。

// ChildComponent.vue
<template>
  <div>
     <slot> Fallback Content </slot>
  </div>
</template>

然后在我们的父组件中:

// ParentComponent.vue
<template>
   <child-component>
      Override fallback content
   </child-component>
</template>

编译后，我们的DOM将如下所示。

<div> Override fallback content </div>

我们还可以将来自父级作用域的任何数据包在在 slot 内容中。 因此，如果我们的组件有一个名为name的数据字段，我们可以像这样轻松地添加它。

<template>
   <child-component>
      {{ text }} 
   </child-component>
</template>

<script>
export default {
   data () {
     return {
       text: &#39;hello world&#39;,
     }
   }
}
</script>

【相关推荐：vue.js教程】

为什么我们需要作用域插槽

我们来看另一个例子，假设我们有一个ArticleHeader组件，data 中包含了一些文章信息。

// ArticleHeader.vue
<template>
  <div>
    <slot v-bind:info="info"> {{ info.title }} </slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: {
        title: &#39;title&#39;,
        description: &#39;description&#39;,
      },
    }
  },
}
</script>

我们细看一下 slot 内容，后备内容渲染了 info.title。

在不更改默认后备内容的情况下，我们可以像这样轻松实现此组件。

// ParentComponent.vue
<template>
  <div>
    <article-header />
  </div>
</template>

在浏览器中，会显示 title。

虽然我们可以通过向槽中添加模板表达式来快速地更改槽中的内容，但如果我们想从子组件中渲染info.description，会发生什么呢?

我们想像用下面的这种方式来做：

// Doesn't work!
<template>
  <div>
    <article-header>
        {{ info.description }}
    </article-header>
  </div>
</template>

但是，这样运行后会报错 ：TypeError: Cannot read property ‘description’ of undefined。

这是因为我们的父组件不知道这个info对象是什么。

那么我们该如何解决呢？

引入作用域插槽

简而言之，作用域内的插槽允许我们父组件中的插槽内容访问仅在子组件中找到的数据。 例如，我们可以使用作用域限定的插槽来授予父组件访问info的权限。

我们需要两个步骤来做到这一点：

• 使用v-bind让slot内容可以使用info
• 在父级作用域中使用v-slot访问slot属性

首先，为了使info对父对象可用，我们可以将info对象绑定为插槽上的一个属性。这些有界属性称为slot props。

// ArticleHeader.vue
<template>
  <div>
    <slot v-bind:info="info"> {{ info.title }} </slot>
  </div>
</template>

然后，在我们的父组件中，我们可以使用<template></template>和v-slot指令来访问所有的 slot props。

// ParentComponent.vue 
<template>
  <div>
    <child-component>
      <template v-slot="article">
      </template>
    </child-component>
  </div>
</template>

现在，我们所有的slot props,（在我们的示例中，仅是 info）将作为article对象的属性提供，并且我们可以轻松地更改我们的slot以显示description

// ParentComponent.vue 
<template>
  <div>
    <child-component>
      <template v-slot="article">
        {{ article.info.description }}
      </template>
    </child-component>
  </div>
</template>

그런 다음 상위 컴포넌트에서:

rrreee

컴파일 후 DOM은 다음과 같습니다.

rrreeeslot 콘텐츠에서 상위 범위의 모든 데이터를 래핑할 수도 있습니다. 따라서 구성 요소에 name이라는 데이터 필드가 있는 경우 다음과 같이 쉽게 추가할 수 있습니다. rrreee【관련 권장 사항: vue.js 튜토리얼

】

스코프 슬롯이 필요한 이유

해보자 또 다른 예를 살펴보면 ArticleHeader 구성 요소가 있고 data에 일부 기사 정보가 포함되어 있다고 가정해 보겠습니다.

rrreee

slot 콘텐츠를 자세히 살펴보겠습니다. 대체 콘텐츠는 info.title을 렌더링합니다.

기본 대체 콘텐츠를 변경하지 않고도 이와 같은 구성 요소를 쉽게 구현할 수 있습니다.
rrreee

브라우저에 제목이 표시됩니다.

템플릿 표현식을 추가하여 슬롯의 내용을 빠르게 변경할 수 있지만 하위 구성 요소에서 info.description을 렌더링하려는 경우에는 어떻게 될까요?

🎜다음 방법을 사용한다고 가정해 보겠습니다. 하세요: 🎜rrreee🎜 그러나 이 방법을 실행하면 TypeError: Cannot read property 'description' of undef라는 오류가 보고됩니다. 🎜🎜이것은 상위 구성 요소가 이 info 개체가 무엇인지 모르기 때문입니다. 🎜🎜그럼 어떻게 해결하나요? 🎜🎜범위 지정 슬롯 소개 🎜🎜간단히 말하면 범위 지정 슬롯을 사용하면 상위 구성 요소의 슬롯 콘텐츠가 하위 구성 요소에 있는 데이터에만 액세스할 수 있습니다. 예를 들어 범위가 지정된 슬롯을 사용하여 상위 구성요소에 정보에 대한 액세스 권한을 부여할 수 있습니다. 🎜🎜이 작업을 수행하려면 두 단계가 필요합니다. 🎜

• infoslot 콘텐츠를 사용 가능하게 하려면 v-bind를 사용하세요. /li>
• 상위 범위에서 v-slot을 사용하여 slot 속성에 액세스합니다.

🎜먼저 info는 상위 개체에 사용할 수 있으며 info 개체를 슬롯의 속성으로 바인딩할 수 있습니다. 이러한 제한된 속성을 슬롯 소품이라고 합니다. 🎜rrreee🎜그런 다음 상위 구성 요소에서 <template></template> 및 v-slot 지시문을 사용하여 모든 슬롯 소품에 액세스할 수 있습니다. 🎜rrreee🎜이제 모든 슬롯 소품(이 예에서는 info만)이 article 개체의 속성으로 사용 가능하며 slot는 <code>설명 내용을 표시합니다. 🎜rrreee🎜최종 효과는 다음과 같습니다. 🎜🎜🎜🎜🎜🎜🎜 요약 🎜🎜 Vue 범위 슬롯은 매우 간단한 개념이지만 하위 구성 요소 데이터에 액세스할 수 있는 슬롯 콘텐츠를 만드는 것은 훌륭한 구성 요소 유용성을 디자인하는 데 매우 유용합니다. 데이터를 한 위치에 보관하고 이를 다른 위치에 바인딩하면 다양한 상태를 보다 명확하게 관리할 수 있습니다. 🎜🎜🎜원본 주소: https://learnvue.co/2021/03/when-why-to-use-vue-scoped-slots/🎜🎜저자: Ashish Lahoti🎜🎜🎜번역 주소: https://segmentfault. com/a/1190000039801512🎜🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 소개🎜를 방문하세요! ! 🎜

위 내용은 Vue의 스코프 슬롯을 사용하는 이유는 무엇입니까? 언제 사용하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!