vue에서 슬롯 및 슬롯 범위의 구체적인 사용법-JS 튜토리얼-php.cn

이 글은 주로 Vue에서 슬롯과 슬롯 스코프의 구체적인 사용법을 소개합니다. 편집자는 그것이 꽤 좋다고 생각하므로 지금 공유하고 참고용으로 제공하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

이전에 작성됨

vue의 슬롯에 대한 문서는 매우 짧고 매우 간결한 언어로 작성되었습니다. 또한 메서드, 데이터, 계산 등 일반적인 옵션의 사용 빈도와 순서가 다릅니다. . , 이로 인해 슬롯을 처음 접하는 개발자는 쉽게 "잊어버리고 나중에 배우세요. 어차피 기본 구성 요소를 이미 작성할 수 있습니다"라고 생각하여 vue 문서를 닫을 수 있습니다.

사실 슬롯의 개념은 매우 간단합니다. 이 부분 역시 Vue 문서의 순서대로 작성되었습니다.

세 번째 부분에 들어가기 전에 슬롯에 노출되지 않은 학생들에게 슬롯이 무엇인지에 대한 간단한 개념을 알려주십시오. 슬롯이라고도 하는 슬롯은 구성 요소의 HTML 템플릿입니다. 이 템플릿은 표시되거나 표시되지 않습니다. , 표시 방법은 상위 구성 요소에 따라 결정됩니다. 실제로 슬롯의 두 가지 핵심 문제, 즉 표시 여부와 표시 방법이 여기에 강조되어 있습니다.

슬롯은 템플릿이므로 모든 구성 요소는 실제로 템플릿 유형 관점에서 슬롯이 아닌 템플릿과 슬롯 템플릿이라는 두 가지 범주로 나눌 수 있습니다.

비슬롯 템플릿은 'p,span,ul,table'등을 참조하는 html 템플릿을 말합니다. 비슬롯 템플릿의 표시 및 숨기기 및 표시 방법은 플러그인 자체에서 제어합니다. 슬롯 템플릿은 슬롯이며, 표시 및 숨기기와 표시에 사용되는 최종 HTML 템플릿이 상위 구성 요소에 의해 제어되기 때문에 빈 쉘입니다. 그러나 슬롯 표시의 위치는 실제로 하위 구성 요소 자체에 의해 결정됩니다. 슬롯이 구성 요소 템플릿에 기록되면 나중에 상위 구성 요소에서 전달된 템플릿이 표시됩니다.

싱글 슬롯 | 기본 슬롯 | 익명 슬롯

우선 싱글 슬롯, 싱글 슬롯이 Vue의 공식 명칭이지만 실제로는 기본 슬롯이라고도 할 수 있고, 이름이 지정된 슬롯은 익명 슬롯이라고 부를 수 있습니다. name 속성을 설정할 필요가 없기 때문입니다.

단일 슬롯은 구성 요소의 어느 위치에나 배치할 수 있지만 이름과 마찬가지로 구성 요소에는 이러한 유형의 슬롯이 하나만 있을 수 있습니다. 이에 따라 이름(이름 속성)이 다른 한 명명된 슬롯이 많이 있을 수 있습니다.

다음은 예시입니다.

상위 컴포넌트:

<template>
 <p class="father">
  <h3>这里是父组件</h3>
  <child>
   <p class="tmpl">
    <span>菜单1</span>
    <span>菜单2</span>
    <span>菜单3</span>
    <span>菜单4</span>
    <span>菜单5</span>
    <span>菜单6</span>
   </p>
  </child>
 </p>
</template>

로그인 후 복사

하위 컴포넌트:

<template>
 <p class="child">
  <h3>这里是子组件</h3>
  <slot></slot>
 </p>
</template>

로그인 후 복사

이 예에서는 상위 컴포넌트가 에 html 템플릿을 작성하므로 하위 컴포넌트의 익명 슬롯 템플릿은 다음과 같습니다. 즉, 하위 구성 요소의 익명 슬롯은 아래 템플릿에서 사용됩니다.

<p class="tmpl">
 <span>菜单1</span>
 <span>菜单2</span>
 <span>菜单3</span>
 <span>菜单4</span>
 <span>菜单5</span>
 <span>菜单6</span>
</p>

로그인 후 복사

최종 렌더링 결과는 그림과 같습니다.

참고: 모든 데모는 더 쉽게 관찰할 수 있도록 스타일이 지정되었습니다. 그 중 상위 컴포넌트는 회색 배경으로 채워지고, 하위 컴포넌트는 연한 파란색 배경으로 채워집니다.

Named Slot

익명 슬롯은 이름 속성이 없으므로 익명 슬롯입니다. 그러면 슬롯에 이름 속성이 추가되면 이름이 지정된 슬롯이 됩니다. 명명된 슬롯은 구성 요소에 N번 나타날 수 있습니다. 다른 위치에 나타납니다. 아래 예는 두 개의 명명된 슬롯과 단일 슬롯이 있는 구성 요소입니다. 이 세 개의 슬롯은 동일한 CSS 스타일 세트를 사용하는 상위 구성 요소에 의해 표시되지만 내용은 약간 다릅니다.

상위 구성 요소:

<template>
 <p class="father">
 <h3>这里是父组件</h3>
 <child>
  <p class="tmpl" slot="up">
  <span>菜单1</span>
  <span>菜单2</span>
  <span>菜单3</span>
  <span>菜单4</span>
  <span>菜单5</span>
  <span>菜单6</span>
  </p>
  <p class="tmpl" slot="down">
  <span>菜单-1</span>
  <span>菜单-2</span>
  <span>菜单-3</span>
  <span>菜单-4</span>
  <span>菜单-5</span>
  <span>菜单-6</span>
  </p>
  <p class="tmpl">
  <span>菜单->1</span>
  <span>菜单->2</span>
  <span>菜单->3</span>
  <span>菜单->4</span>
  <span>菜单->5</span>
  <span>菜单->6</span>
  </p>
 </child>
 </p>
</template>

로그인 후 복사

하위 구성 요소:

<template>
 <p class="child">
 // 具名插槽
 <slot name="up"></slot>
 <h3>这里是子组件</h3>
 // 具名插槽
 <slot name="down"></slot>
 // 匿名插槽
 <slot></slot>
 </p>
</template>

로그인 후 복사

표시 결과는 그림과 같습니다.

보시다시피 상위 구성 요소는 html 템플릿의 슬롯 속성을 통해 명명된 슬롯과 연결됩니다. 슬롯 속성이 없는 HTML 템플릿은 기본적으로 익명 슬롯과 연결됩니다.

스코프 슬롯 | 데이터가 있는 슬롯

마지막으로 스코프 슬롯이 있습니다. 이것은 이해하기가 조금 더 어렵습니다. 공식적으로는 스코프 슬롯이라고 합니다. 사실 앞의 두 슬롯과 비교하면 데이터가 있는 슬롯이라고 할 수 있습니다. 무슨 말인가요? 처음 두 개는 구성 요소

익명 슬롯

<slot></slot>

로그인 후 복사

이름이 지정된 슬롯

<slot name="up"></slot>

로그인 후 복사

의 템플릿에 기록됩니다. 하지만 스코프 슬롯에는 슬롯에 데이터 바인딩이 필요합니다. 즉, 대략 아래와 같이 작성해야 합니다.

<slot name="up" :data="data"></slot>
 export default {
 data: function(){
  return {
  data: [&#39;zhangsan&#39;,&#39;lisi&#39;,&#39;wanwu&#39;,&#39;zhaoliu&#39;,&#39;tianqi&#39;,&#39;xiaoba&#39;]
  }
 },
}

로그인 후 복사

앞서 말했듯이 슬롯이 마지막에 표시되는지 여부는 아래와 같이 상위 구성 요소가 하위 구성 요소 아래에 템플릿을 작성했는지 여부에 따라 달라집니다.

<child>
 html模板
</child>

로그인 후 복사

기록된 경우 슬롯은 브라우저에 무언가를 표시해야 합니다. HTML이 기록되지 않은 경우 슬롯은 아무것도 없는 빈 셸이 됩니다.
자, HTML 템플릿이 있다는 것은 상위 구성 요소가 하위 구성 요소에 템플릿을 삽입한다는 의미입니다. 그러면 어떤 스타일을 삽입해야 할까요? 이는 상위 구성 요소의 html+css에 따라 결정됩니다. 하지만 이 스타일 세트의 내용은 어떻습니까?

스코프 슬롯은 데이터 세트에 바인딩되어 있으므로 상위 구성 요소가 이를 사용할 수 있습니다. 따라서 상황은 다음과 같습니다. 상위 구성 요소는 스타일에 대한 최종 결정권을 가지지만 콘텐츠는 하위 구성 요소의 슬롯 바인딩을 표시할 수 있습니다.

我们再来对比，作用域插槽和单个插槽和具名插槽的区别，因为单个插槽和具名插槽不绑定数据，所以父组件是提供的模板要既包括样式由包括内容的，上面的例子中，你看到的文字，“菜单1”，“菜单2”都是父组件自己提供的内容；而作用域插槽，父组件只需要提供一套样式（在确实用作用域插槽绑定的数据的前提下）。

下面的例子，你就能看到，父组件提供了三种样式(分别是flex、ul、直接显示)，都没有提供数据，数据使用的都是子组件插槽自己绑定的那个人名数组。

父组件：

<template>
 <p class="father">
 <h3>这里是父组件</h3>
 <!--第一次使用：用flex展示数据-->
 <child>
  <template slot-scope="user">
  <p class="tmpl">
   <span v-for="item in user.data">{{item}}</span>
  </p>
  </template>

 </child>

 <!--第二次使用：用列表展示数据-->
 <child>
  <template slot-scope="user">
  <ul>
   <li v-for="item in user.data">{{item}}</li>
  </ul>
  </template>

 </child>

 <!--第三次使用：直接显示数据-->
 <child>
  <template slot-scope="user">
  {{user.data}}
  </template>

 </child>

 <!--第四次使用：不使用其提供的数据, 作用域插槽退变成匿名插槽-->
 <child>
  我就是模板
 </child>
 </p>
</template>

로그인 후 복사

子组件：

<template>
 <p class="child">

 <h3>这里是子组件</h3>
 // 作用域插槽
 <slot :data="data"></slot>
 </p>
</template>

 export default {
 data: function(){
  return {
  data: [&#39;zhangsan&#39;,&#39;lisi&#39;,&#39;wanwu&#39;,&#39;zhaoliu&#39;,&#39;tianqi&#39;,&#39;xiaoba&#39;]
  }
 }
}

로그인 후 복사

结果如图所示：