vue에서 슬롯 및 슬롯 범위를 사용하는 단계에 대한 자세한 설명-JS 튜토리얼-php.cn

이번에는 vue에서 슬롯 및 슬롯 범위를 사용하는 단계에 대해 자세히 설명하겠습니다. vue에서 슬롯 및 슬롯 범위를 사용할 때 주의 사항은 무엇입니까?

이 글에서는 vue의 슬롯과 슬롯스코프의 구체적인 사용법 튜토리얼을 소개합니다. 도움이 필요한 친구들이 와서 구경해보세요

앞으로 쓰기

Vue의 슬롯에 대한 문서 설명은 매우 짧고 언어가 매우 간결합니다. 또한 메서드, 데이터, 계산 등 일반적인 옵션의 사용 빈도와 순서에 차이가 있어 이로 인해 발생할 수 있는 문제가 있습니다. 첫 번째 슬롯을 접하는 개발자는 "어차피 기본 구성 요소를 이미 작성할 수 있으므로 잊어버리고 나중에 배우십시오"라는 경향이 있으므로 Vue 문서를 닫습니다.

사실 슬롯의 개념은 매우 간단하며, 다음과 같이 세 부분으로 나누어진다. 이 부분 역시 Vue 문서의 순서대로 작성되었습니다.

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

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

비슬롯 템플릿은 'p,span,ul,table'등을 참조하는 html 템플릿을 의미합니다. 비슬롯 템플릿의 표시 및 숨기기 및 표시 방법은 플러그인 자체에 의해 제어됩니다. 슬롯은 빈 공간입니다. Shell의 표시 및 숨기기와 표시에 사용되는 최종 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 템플릿이 있으므로 하위 구성 요소의 익명 슬롯에 대한 템플릿은 다음과 같습니다. 즉, 하위 구성요소의 익명 삽입 슬롯은 아래 템플릿에서 사용됩니다.

rreee

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

명명된 슬롯

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

상위 구성 요소:

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

로그인 후 복사

하위 구성 요소:

<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>

로그인 후 복사

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

범위 슬롯 | 데이터가 있는 슬롯

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

익명 슬롯

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

로그인 후 복사

명명된 슬롯

<slot></slot>

로그인 후 복사

그러나 범위 슬롯에는 슬롯의 데이터 바인딩이 필요합니다. 즉, 대략 아래와 같이 작성해야 합니다.

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

로그인 후 복사

我们前面说了，插槽最后显示不显示是看父组件有没有在child下面写模板，像下面那样。

<child>
 html模板
</child>

로그인 후 복사

写了，插槽就总得在浏览器上显示点东西，东西就是html该有的模样，没写，插槽就是空壳子，啥都没有。
OK，我们说有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: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
  }
 }
}

로그인 후 복사

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！