Как я закончил играть со слотами Vue Scoped

Программа перевода самородков внешний фреймворк

Vue — это интерфейсная среда для создания веб-приложений, разработанная таким образом, чтобы разработчики могли работать очень быстро. Материала по всем аспектам фреймворка очень много, и его сообщество растет с каждым днем. Если вы читаете эту статью, вы, вероятно, уже знаете эти вещи.

Хотя мы можем быстро направить его и запустить, но внутри рамок тех более сложных и мощных мест все же нужна добрая половина мозга, чтобы разобраться (по крайней мере, я так думаю). Один из них слот, есть еще одна связанная, но не такая же функция, это объем слотов. Я потратил много времени, чтобы научиться понимать слот, прежде чем работать с механизмом, поэтому я думаю, что он поделится своим пониманием слотов, это ценно, потому что есть вероятность, что это поможет всем.

Слоты и титульные слоты

Родительские компоненты передают информацию дочерним компонентам другим способом (не через обычный механизм передачи свойств props). Я считаю полезным связать этот подход с обычными элементами HTML.

Например, HTML-теги.

<a href=”/sometarget">This is a link</a>

Если это в среде Vue и является вашим компонентом, вам нужно отправить сообщение «Это ссылка» компоненту «a», и оно будет отображаться как гиперссылка, а «Это ссылка» " - это текст этой ссылки.

Давайте определим подкомпонент, чтобы показать, как работает его механика:

<template>  
  <div>  
    <slot></slot>  
  </div>  
</template>

Затем в родительском компоненте делаем так:

<template>  
  <div>  
    <child-component>This is from outside</child-component>  
  </div>  
</template>

На этом этапе экран должен быть отображен как «Это снаружи», как вы ожидаете, но это оказывается дочерним компонентом.

Мы также можем добавить информацию по умолчанию в дочерние компоненты, чтобы здесь ничего не передавалось, например:

<template>  
  <div>  
    <slot>Some default message</slot>  
  </div>  
</template>

Затем, если мы создадим наш дочерний компонент следующим образом:

<child-component>  
</child-component>

Мы видим, что на экране отображается «Некоторое сообщение по умолчанию».

Именованные слоты очень похожи на обычные слоты, с той лишь разницей, что вы можете передать свой текст в нескольких местах в целевом компоненте.

Давайте обновим подкомпонент, чтобы иметь несколько именованных слотов.

<template>  
  <div>  
    <slot>Some default message</slot>  
    <br/>  
    <slot name="top"></slot>  
    <br/>  
    <slot name="bottom"></slot>  
  </div>  
</template>

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

Давайте обновим родительский компонент, чтобы использовать его.

<child-component v-slot:top>  
Hello there!  
</child-component>

Примечание. Здесь мы используем новый синтаксис Vue 2.6, чтобы указать слот, на который мы хотим настроить таргетинг: `v-slot:theName`.

Как вы думаете, что вы сейчас увидите на экране? Если вы говорите «Hello Top!», то вы правы лишь частично.

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

Some default message
Hello There!

На самом деле безымянные слоты рассматриваются как «по умолчанию», поэтому вы также можете сделать:

<child-component v-slot:default>  
Hello There!  
</child-component>

Теперь мы увидим только:

Hello There!

Поскольку мы предоставили значения для слотов по умолчанию (т. е. безымянных), именованные слоты «верхний» и «нижний» также не имеют значений по умолчанию.

То, что вы отправляете, не обязательно должно быть просто текстом, это могут быть другие компоненты или HTML. Вы можете отправить все, что хотите показать.

слот с прицелом

Я думаю, что слоты и именованные слоты относительно просты, и их можно освоить, если немного поиграть. С другой стороны, слоты с ограниченной областью действия имеют похожие названия, но есть несколько отличий.

Я склонен думать о слотах с прицелом как о проекторе (или проекторе моего европейского друга). Вот почему.

Слоты с заданной областью действия в дочерних компонентах могут предоставлять данные для отображения слотов в родительских компонентах. Это как стоять внутри дочернего компонента с проектором и заставлять некоторые изображения светиться на стене родительского компонента.

Вот пример. В дочернем компоненте мы устанавливаем слот следующим образом:

<template>  
  <div>  
    <slot name="top" :myUser="user"></slot>  
    <br/>  
    <slot name="bottom"></slot>  
    <br/>  
  </div>  
</template>

<script>

data() {  
  return {  
    user: "Ross"  
  }  
}

</script>

Обратите внимание, что наш именованный слот «top» теперь имеет свойство «myUser», а затем мы привязываем динамическое значение к «user».

В нашем родительском компоненте установите дочерний компонент следующим образом:

<div>  
   <child-component v-slot:top="slotProps">{{ slotProps }}</child-component>  
</div>

Вот что мы видим на экране:

{ "myUser": "Росс" }

По-прежнему используя аналогию с проектором, наш дочерний компонент передает значение своей пользовательской строки родительскому компоненту через объект myUser. Стены, которые он проецирует на родительский компонент, называются 'slotProps'.

Я знаю, что это не идеальная аналогия, но она помогла мне думать таким образом, когда я впервые пытался понять механизм.

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

Используйте деконструкцию ES6 в родительской сборке, таким образом мы также можем записать определенные пользовательские объекты из атрибута слота (насколько легко вы можете его назвать) освобожденным:

<child-component v-slot:top="{myUser}">{{ myUser }}</child-component>

Или даже просто дайте ему новое имя в родительском компоненте:

<child-component v-slot:top="{myUser: aFancyName}">{{ aFancyName }}</child-component>

Все они уничтожаются через ES6 и не имеют ничего общего с самим Vue.

Если вы начинаете работать с Vue и слотами, надеюсь, это поможет вам начать работу и решить некоторые сложные проблемы.

Если вы обнаружите ошибки в переводе или в других областях, требующих доработки, добро пожаловать наПрограмма перевода самородковВы также можете получить соответствующие бонусные баллы за доработку перевода и PR. начало статьиПостоянная ссылка на эту статьюЭто ссылка MarkDown этой статьи на GitHub.

Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из ИнтернетаНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,товар,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.

Категории