Почему этот текст активатора исчезает, когда слот рассматривается как слот с ограниченной областью действия?

Текст активатора Vuetify v-list-group исчезает, когда он рассматривается как слот с ограниченной областью видимости с использованием нового синтаксиса Vue (<template v-slot:activator> vs <template v-slot:activator="{on}">).

Я раздвоил пример Codepen для Vuetify и урезал его для простоты. Я настроил его так, чтобы я мог легко комментировать активатор, использовать или нет слоты с ограниченной областью действия. Текст активатора определенно отображается при использовании только v-slot:activator.

Вот моя ссылка на Codepen: https://codepen.io/Made-of-Clay/pen/rNBzeaQ&editors=101

Оригинальное перо, от которого я раздвоился: https://codepen.io/pen/?&editable=true&editors=101)

Страница документов, на которой я нашел перо: https://vuetifyjs.com/en/components/lists#expansion-lists

Ошибок и предупреждений не замечаю. Я ожидаю, что текст активатора появится при использовании v-slot:activator="{on}" и v-on="on", как указано в документации.


person Adam Leis    schedule 30.08.2019    source источник


Ответы (1)


Добавление ="{on}" в конец изменит использование слота с обычного слота на слот с ограниченной областью действия. Я не уверен, почему вы думаете, что слот activator для v-list-group может использоваться как слот с ограниченной областью видимости, ничто из того, что я нашел в документации, не предполагает, что он поддерживает это.

Если мы посмотрим на код для v-list-group, мы увидим следующее:

com / vuetifyjs / vuetify / blob / db84347f242fe73288b72c7e72a1af04b09c9434 / packages / vuetify / src / components / VList / VListGroup.ts # L157

Доступ к activator осуществляется как к обычному слоту через this.$slots.activator. Это будет работать, только если вы используете обычный слот.

Сравните это с другими компонентами, такими как v-menu. Компонент v-menu также имеет слот activator, но поддерживает его использование в качестве обычного слота или слота с ограниченной областью действия.

person skirtle    schedule 31.08.2019
comment
Полагаю, я ожидал, что слот передаст объект on, как это происходит с v-menu, но, похоже, это не так. Я добавил внутрь v-tooltip, чтобы проверить свой вариант использования, и все работает. Спасибо, что поправил меня, @skirtle! - person Adam Leis; 03.09.2019