Что такое слот?
Мы знаем, что ничто не может быть помещено в середину метки дочернего компонента в Vue.
Но часто, когда мы используем компоненты, мы всегда хотим настроить некоторые метки вне компонентов.Vue добавляет механизм слотов, называемый слотом области. Требуемая версия 2.1.0+;
Слоты фактически эквивалентны заполнителям. Это дает вашему HTML-шаблону место в компоненте, позволяя вам что-то передавать. Слоты далее делятся на анонимные слоты, именованные слоты и слоты с ограниченной областью действия.
В версии 2.6.0 мы представили новый унифицированный синтаксис для именованных слотов и слотов с заданной областью (т.е.v-slotинструкция). он заменяетslotа такжеslot-scope
анонимный слот
Анонимный слот, мы также можем назвать его одиночным слотом или слотом по умолчанию. По сравнению с именованным слотом, для него не нужно устанавливать атрибут имени, а атрибут скрытого имени используется по умолчанию.
father.vue
child.vue
Анонимный слот, атрибут имени соответствует значению по умолчанию или может быть опущен, чтобы означать значение по умолчанию;
Есть еще одна проблема, на которую следует обратить внимание при его использовании: если анонимных слотов больше 2, все содержимое дочернего тега будет заменено на каждый слот;
Именованный слот (устаревший слот vue2.6.0+='name')
Как подразумевает имя, слот с именем, определение: или использовать простое сокращенное определение # Удача использования: оберните его с тегом шаблона
father.vue
child.vue
Давайте поговорим об использовании нескольких именованных слотов.Множественные именованные слоты, позиция слота не определяется позицией используемого слота, она заменяется позицией в момент определения
father.vue
child.vue
слот с прицелом
слот, используемый для передачи данных
Когда вы хотите использовать данные в слоте, обратите внимание на проблему области видимости, официальная документация Vue говорит, что все в родительском шаблоне компилируется в родительской области, все в дочернем шаблоне Все содержимое компилируется в дочерней области ;
Чтобы сделать данные в дочернем компоненте доступными в содержимом родительского слота, мы можем связать данные как атрибут элемента: v-bind:text="text"
Уведомление:
Разница между слотом анонимной области и слотом именованной области видимости между V-слотом: По умолчанию = "Имя" (ПО УМОЛЧАНИЮ (анонимное нельзя писать, противоположным имени является соответствующее имя))
v-solt может деконструировать и получать. Деконструированное полученное поле должно совпадать с переданным полем. Например, :one соответствует v-slot="{one}"
визуализация