слот vue передает события в слот и вызывает внешнюю функцию

Vue.js

Поскольку некоторые страницы похожи и все имеют одно и то же, я подумал об использовании метода слота для написания компонента шаблона. Уменьшение количества дублирования кода также экономит время разработки.

image.pngОпределите именованный слот в компоненте helloWorld с именем head, который связан с двумя атрибутами data и done, где done является методом.

image.pngПри использовании файла app.vue он получается по аббревиатуре знака #, а затем деконструкцией принимаются свойства слота.Подобно реквизиту, случай официального сайта

image.pngМетод done на моей стороне можно вызывать напрямую

image.png

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

image.png

image.pngЧто, если вы хотите сначала обработать данные, а затем вызвать этот метод? Я тоже долго об этом думал потому что на лейбле можно вызывать только один метод, а несколько методов вызывать нельзя.Это не то же самое, что писать js вызывать несколько и писать несколько.В это время метод можно передается как параметр, а затем аналогично функции обратного вызова тот же вызов

image.png

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

image.png

image.png

Делайте небольшие, но ежедневные успехи