Vue 슬롯 및 재사용 가능 구성 요소

Vue 슬롯 및 재사용 가능 구성 요소

안녕하세요, 개발자 친구!여기서 만나서 반갑습니다.
본고에서 우리는 vue의 간단한 기능slot이 같은 구성 요소에서 서로 다른 데이터를 표시할 때 많은 시간과 정력을 절약할 수 있는 방식을 이해할 것이다.
때때로 우리는 서로 다른 데이터로 같은 임무를 복제해야 한다. 예를 들어, 당신은 디자인 시스템을 가지고 있다. 이것은 전체 사이트의 모든 목록 요소가 일치해야 한다는 것을 결정한다. 이것은 같은 높이, 너비, 글씨체 등을 의미한다. 듣기에 매우 공평하다.
이를 위해서는 두 가지 옵션이 있습니다.

Copy + Paste 같은 목록 구성 요소가 여러 위치에 있음;예를 들어 목록 항목의 글꼴을 업데이트해야 할 때 이런 방법의 반환이 나타난다.만약 공교롭게도 프로젝트에 1, 2 또는 3개의 목록 항목이 있다면 수동으로 변경할 수 있습니다. 모든 것이 정상입니다!하지만 프로젝트에 열거된 구성 요소가 쌓여 있을 때 어떤 일이 일어날까요?그것은 하나하나 변화를 필요로 한다.개발, 품질 보증에 대한 노력과 한 장면을 범위를 넘어설 위험이 높다.

하나를 만듭니다Reusable Component. 이것은 한 곳에서만 변경할 수 있고 모든 변경 사항에 영향을 줍니다!여기에서 slot 개념은 매우 편리합니다. slot를 사용할 때, 모든 열거된 구성 요소에 같은 외관, 행위, 속성과 기타를 제공할 수 있습니다.

비밀번호 보여주세요.

중점적으로 고려해야 할 단계는 다음과 같습니다.

재사용 가능한 목록 구성 요소 1개

서로 다른 보기 구성 요소를 가지고 서로 다른 데이터를 주입

서로 다른 보기 구성 요소를 가지고 서로 다른 요소를 표시한다

GitHub 코드here를 공유합니다.

1. 재사용 가능한 목록 구성 요소 1개

예를 들어 그것은 어떻게 보입니까 slot

<template>
  <div>
    <ul>
      <li v-for="(element, index) in elements" :key="element.id">
        <slot name="element" v-bind:element="element" v-bind:index="index"></slot>
      </li>
    </ul>
  </div>
</template>

위의 코드 세션에 v-for 명령이 있는데 elements라는 속성 중의 수조에서 순환한다.현재 상황은 모든 요소와 인덱스는 템플릿의 일부분으로 사용할 수 있으며 slot 귀속값의 옵션이 있으며 slot만 호출하면 사용할 수 있습니다.
이것은 매우 간단합니다. 바로 다시 사용할 수 있는 구성 요소slots가 있습니다!html 요소는 필요에 따라 수정할 수 있습니다. css, 새로운 속성, 새로운 귀속 도구를 추가하고 구성 요소를 호출할 때 모든 것을 사용할 수 있습니다GitHubrepo를 사용하여 더 좋은 체험을 얻을 수 있습니다Tailwind.

2. 서로 다른 보기 구성 요소를 가지고 서로 다른 데이터를 주입한다.

연습에 편리하도록 뷰 어셈블리의 전원을 공급하는 3가지 다른 패턴을 제공합니다.

export const agents = [
  { id: '07531267-D', name: 'Remedios Carmona', calls: 12, deals: 5 },
  { id: '91958619', name: 'Dalal Heidema', calls: 20, deals: 12 },
  { id: 'NNaN31539321', name: 'Julien Legrand', calls: 25, deals: 17 },
  { id: '1NNaN60472038', name: 'Karina da Cunha', calls: 33, deals: 25 },
  { id: '060469-1435', name: 'Evelyn Scheerer', calls: 40, deals: 35 },
];

export const supervisors = [
  { id: '75687', name: 'Idelso Gonçalves', agents: 10, teams: 1, gender: 'male' },
  { id: '2NNaN64983816', name: 'Cassandra Leroy', agents: 20, teams: 2, gender: 'female' },
  { id: 'N901057Z', name: 'Arron Johnston', agents: 30, teams: 3, gender: 'male' },
  { id: '18066349671', name: 'Siham Reitan', agents: 40, teams: 4, gender: 'female' },
  { id: '48926083', name: 'Mariam Linde', agents: 50, teams: 5, gender: 'female' },
];

export const managers = [
  { id: 'NaNNA831undefined', name: 'Niilo Keranen', department: 'IT', gender: 'male' },
  { id: '2NNaN40789264', name: 'Leana Deschamps', department: 'Operations', gender: 'female' },
  { id: '283707860', name: 'Irma Boyd', department: 'HHRR', gender: 'female' },
  { id: '290471', name: 'Nicole Oehme', department: 'ACC', gender: 'female' },
  { id: '1NNaN44873525', name: 'Antonin Rey', department: 'Facilities', gender: 'male' },
];

보시다시피 views는Agents,Supervisors과Managers입니다.위에서 말한 바와 같이 이러한 항목은 일치성을 유지하기 위해 디자인 시스템 규범(너비, 높이, 글씨체, 타자)에 따라 열거해야 한다.
설계 시스템의 요구 사항은 다음과 같습니다.Agents 보기:Supervisors 보기:Managers 보기:
아날로그 데이터와 요구 사항을 본 후에 표시할 필드, 순서, 배경을 변경합니다. Copy+Paste 방법이 포기되었기 때문에 다른 가능한 방법은 구성 요소를 다시 사용할 수 있습니다.

3. 서로 다른 보기 구성 요소를 가지고 서로 다른 요소를 표시한다

재사용 가능한 구성 요소와 슬롯의 실현에 대해 깊이 있게 알아보자.
첫 번째 보기는 Agents의 보기입니다. 다시 사용할 수 있는 구성 요소를 가져오고 등록하고 요소 목록을 제공하기 위해 입력 속성을 추가해야 합니다. (절차를 건너뛰면 원본 코드를 볼 수 있고 더 많은 정보를 알 수 있습니다) 주목해 주십시오templateAgents 보기:

<template>
  <custom-list :listElements="listElements" itemStyling="justify-between bg-gray-300">
    <template v-slot:element="{ element }">
      <div class="flex w-1/5"></div>
      <div class="flex w-2/5"></div>
      <div class="flex w-2/5"></div>
    </template>
  </custom-list>
</template>

이 슬라이드에는 다음과 같은 몇 가지 재미있는 내용이 있습니다.

custom-list (재사용 가능한 구성 요소) 는 요소 목록과 항목 스타일이 필요하며, 접근 element 중이기 때문에 표시할 데이터는 동적입니다.

두 번째 관점은요?Supervisors 보기:

<template>
  <custom-list :listElements="listElements" itemStyling="justify-between bg-blue-300">
    <template v-slot:element="{ element }">
      <div class="flex w-2/5"></div>
      <div class="flex w-1/5"></div>
      <div class="flex justify-end w-2/5"></div>
    </template>
  </custom-list>
</template>

이것은 이전과 매우 비슷하다. 가장 큰 차이점은 서로 다른 색깔을 보내서 배경에 영향을 주는 것이다(순풍에 익숙하지 않으면 바로 이것bg-blue-300), 그리고div의 순서(모의 화신은 중간에 놓을 것이다)
마지막으로 가장 중요하지 않은 것은 아니다.Managers 보기:

<template>
  <custom-list :listElements="listElements" itemStyling="justify-between bg-green-300">
    <template v-slot:element="{ element, index }">
      <div class="flex w-2/5"></div>
      <div class="flex justify-center w-2/5"></div>
      <div class="flex w-1/5"></div>
    </template>
  </custom-list>
</template>

다른 2와 유사하지만 배경 색상, 표시할 요소의 순서 (마지막으로 화신) 를 다시 변경하고 구성 요소에 표시된 다른 귀속 속성 index 을 다시 사용합니다.
위의 모든 단계를 완료하면 출력은 다음과 같습니다.
노트:

당신은 Vue2와 Vue3의 환매 협의를 찾을 수 있습니다.

fork와/또는 온라인 코드 편집기에서 마음대로 가져올 수 있음error

도전: 전체 사이트에서 구성 요소 가져오기CustomList를 중지하려면 전 세계에서 이 구성 요소를 등록할 수 있습니다.

결론

위에서 보듯이 slots는 귀중한 개발 시간을 절약하고 확장성을 향상시키며 수요에 따라 맞춤형 제작을 할 수 있다.아마도 당신은 더 좋은 방법이 있을 것입니다. 우리는 아래의 댓글에서 토론할 수 있습니다.
읽어주셔서 감사합니다!