Получение головы вокруг Scoped Scoped Scoped

Автор оригинала: Anthony Gore.

Scoped Slots – это полезная особенность Vue.js, которые могут сделать компоненты более универсальными и многоразовыми. Единственная проблема в том, что они трудно понять! Попытка доставить голову вокруг переплетения родительских и детских областей, похоже на решение жесткого уравнения математики.

Хороший подход, когда вы не можете понять что-то легко, это попытаться использовать его в решении проблемы. В этой статье я продемонстрирую, как я использовал Scoped слоты, чтобы построить многоразовый компонент списка.

Примечание: вы можете увидеть готовый продукт в Этот кодепен Отказ

Примечание: эта статья была первоначально опубликована здесь на блоге разработчиков Vue.js на 2017/10/02.

Основной компонент

Компонент, который мы собираемся построить, называется мой список И это отображает списки вещей. Специальная особенность заключается в том, что вы можете настроить, как элементы списка отображаются в каждом использовании компонента.

Давайте сначала решаем самое простое использование корпуса и получите мой список Чтобы сделать только один список вещей: массив названий геометрических форм и количество сторон у них есть.

app.js.

Vue.component('my-list', {
  template: '#my-list',
  data() {
    return {
      title: 'Shapes',
      shapes: [ 
        { name: 'Square', sides: 4 }, 
        { name: 'Hexagon', sides: 6 }, 
        { name: 'Triangle', sides: 3 }
      ]
    };
  }
});

new Vue({
  el: '#app'
});

index.html.

С помощью добавления CSS это будет выглядеть следующее:

Обобщая мой список

Теперь мы хотим сделать мой список достаточно универсален, чтобы сделать любой список. Второй тестовый случай будет список цветов, включая небольшой образ, чтобы показать, как выглядит цвет.

Для этого нам придется абстрактные данные, относящиеся к списку форм. Поскольку предметы в наших списках могут быть структурированы по-разному, мы дадим мой список Слот, поэтому родитель может определить, как отобразится любой конкретный список.

app.js.

Vue.component('my-list', {
  template: '#my-list',
  props: [ 'title' ]
});

index.html.

Давайте теперь создадим два экземпляра мой список Компонент в корневом экземпляре для отображения наших двух списков тестового корпуса:

app.js.

new Vue({
  el: '#app',
  data: {
    shapes: [ 
      { name: 'Square', sides: 4 }, 
      { name: 'Hexagon', sides: 6 }, 
      { name: 'Triangle', sides: 3 }
    ],
    colors: [
      { name: 'Yellow', hex: '#F4D03F', },
      { name: 'Green', hex: '#229954' },
      { name: 'Purple', hex: '#9B59B6' }
    ]
  }
});

  
    

      
{{ shape.name }} ({{ shape.sides }} sides)
    
  
  
    

      

        

        {{ color.name }}
      
    
  

Это будет выглядеть так:

Поверхностные компоненты

То, что мы только что создали, работает нормально, но не отличный код. мой список Есть, по имени, компонент для отображения списка. Но нам пришлось абстрактную все логику для отображения списка в родитель. Компонент делает немного больше, чем обернуть список с некоторой презентационной разметкой.

Учитывая, что в обеих объявлениях компонента (I.E.) все еще есть повторный код (I.e.

Навесные слоты

Чтобы позволить нам сделать это, мы будем использовать Слот Scoped вместо обычного слота. Scoped слоты позволяют вам пройти Шаблон к слоту вместо прохождения оказанного элемента. Это называется «Scoped» слот, потому что, хотя шаблон отображается в родительской области, он будет иметь доступ к определенным дочерним данным.

Например, компонент ребенок С выселенным слотом может выглядеть следующее.

Родитель, который использует этот компонент, объявит Шаблон элемент в слоте. Этот элемент шаблона будет иметь атрибут Область Это имена объект псевдонима. Любые реквизиты, добавляемые к слоту (в шаблоне ребенка), доступны в качестве свойств объекта псевдонима.

Оказывает как:

  Hello from parent
  Hello from child

Использование выделенного слота в моем списке

Давайте пройдем список массивов на мой список как реквизит. Тогда мы можем заменить слот с выселенным слотом. Таким образом мой список Можно ответить за итерацию элементов списка, но родитель все еще может определить, как следует отобразить элемент каждого списка.

index.html.

Теперь мы получаем мой список итерации предметов. Внутри V-для петля, Предмет является псевдонимом к текущему списку элемент. Мы можем создать слот и привязать этот список для слота, используя v-bind = "Предмет" Отказ

app.js.

Vue.component('my-list', {
  template: '#my-list',
  props: [ 'title', 'items' ]
});

index.html.

Примечание: если вы не видели V-bind Используется без аргумента ранее, это свяжет свойства всего объекта к элементу. Это полезно с выделенными прорезями, так как объекты, которые вы связываете, будут иметь произвольные свойства, которые теперь не должны быть указаны по имени.

Теперь мы вернемся в наш корневой экземпляр и объявляем шаблон внутри слота мой список Отказ Сначала смотрите в список форм, шаблон должен включать Область Имущество, на которое мы назначаем псевдоним Форма Отказ Этот псевдоним позволяет нам получить доступ к выделенным выпадениям. Внутри шаблона мы можем использовать точно такую же разметку, которое мы имели, прежде чем отображать нашу форму списка форм.

Теперь вот полный шаблон:

Заключение

Хотя этот подход имеет столько же наметра, как и раньше, он делегировал общую функциональность компоненту, который делает более надежную конструкцию.

Стать старшим Vue Developer в 2020 году.

Учитесь и осваивайте, какие профессионалы знают о строительстве, тестировании и развертывании, полностью стековых Vue Apps в нашем последнем курсе.

Учить больше