Введение

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

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

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

Прозрачная передача в интерфейсных приложениях

использовать один сегодняУпаковка основных компонентов VueВозьмем для примера процесс, кратко поговорим о том, что такое прозрачная передача.

Я считаю, что многие front-end проекты будут использовать библиотеки компонентов, будь то ElementUI или Ant Design, не имеет значения. Затем мы хотим сделать еще немного настройки на основе сторонней библиотеки компонентов.

Например,el-buttonЕсть свойство, котороеsize, который управляет размером компонента кнопки.

Атрибуты	иллюстрировать	Типы	необязательное значение	По умолчанию
size	размер	String	medium / small / mini	-

Как видите, размер по умолчанию относительно велик. Однако, когда наши дизайнеры придумывают свои собственные дизайнерские решения на основе библиотеки компонентов, размер кнопки по умолчанию, который мы выбираем, может просто соответствоватьElButtonизmediumразмер или другое значение. Таким образом, если я ошибаюсьel-buttonсделать инкапсуляцию, используя каждыйel-buttonВ каждом месте следует написать еще один атрибутsize, что-то вроде этого:

// pageA.vue
<el-button size="medium">按钮1</el-button>
<el-button size="medium">按钮2</el-button>

// pageB.vue
<el-button size="medium">按钮3</el-button>
<el-button size="medium">按钮4</el-button>

Очевидно, что каждый раз, когда вы используетеel-button, я собираюсь написатьsizeАтрибуты так раздражают!

Да, это действительно раздражает, так как же это решить? Ответ заключается в предоставлении программного интерфейса для изменения значения компонента по умолчанию. Разработчики компонентов с учетом этого соображения обычно предоставляют интерфейс для установки значений по умолчанию, таких какxxx.setDefault(options). Так обеспечивают ли ElementUI и Ant Design такие возможности? По моему наблюдению вроде нет, на самом деле, в основном потому, что в Vue нет удобного способа модифицироватьpropизdefaultАтрибуты. Но нет удобного способа не значит нет...

Поскольку предметом данной статьи являетсяпроникнуть, поэтому я не буду говорить об этом пути (или методе), это немного не так.

Пользователь сети Сяо Ван сказал: «Хорошо, тогда приступайте к упаковке компонента!»

Хорошо, запланируйте это сейчас! Основная идея состоит в том, чтобы инкапсулировать пользовательский компонент, а затем вызвать его в компоненте.el-button, и принудительно датьel-buttonУпорядочить свойства по умолчаниюsize="medium".

<template>
    <el-button :size="size">
        <slot />
    </el-button>
</template>

<script>
export default {
    name: "MyButton",
    props: {
        size: {
            type: String,
            default: 'medium'
        }
    }
}
</script>

Умные читатели с первого взгляда обнаружат, что у этого компонента есть большая проблема, за исключением атрибута размера,ElButtonДругие свойства и то, как обрабатываются события, вообще не упоминаются!

Сяо Ван сказал: «Все в порядке, что тебе нужно? Я все устрою!»

Итак, этот компонент, наконец, медленно становится:

<template>
    <el-button
        :size="size"
        :type="type"
        :disabled="disabled"
        @click="onClick"
    >
        <slot />
    </el-button>
</template>

<script>
export default {
    name: "MyButton",
    props: {
        size: {
            type: String,
            default: "medium",
        },
        type: {
            type: String,
            default: "primary",
        },
        disabled: Boolean,
    },
    methods: {
        onClick() {
            this.$emit("click");
        },
    },
};
</script>

Выглядит немного плохо, этот компонент будет еще более избыточным и более сложным, потому что я добавил сюда только 3 пропса и 1 событие. Для немного более сложного компонента в общей сложности десятки реквизита и событий просто случайны! Вы можете вписаться? Более того, у многих до сих пор чистота кода, что просто невыносимо!

успойкойся! На это, конечно, есть решение. Дизайнер You Xiaoyou, сильный, как фреймворк, естественно, подумал об этой сцене, поэтому вам стоит обратить на нее внимание в документации официального сайта Vue.inheritAttrs.

как понятьinheritAttrs(по умолчаниюtrue) этот вариант? Мы знаем, что если компонент хочет принять свойства от родительского компонента, он должен сначалаpropsЭто предопределено внутри. Например, в предыдущем примере яMyButtonПредустановлены три свойства:size, type, disabled, значениеMyButtonЗдесь принимают только 3prop.

Затем предположим, что родительский компонент проходит 4 или болееpropИди сюда, что будет? Рассмотрим следующий пример:

<template>
    <my-button
        type="success"
        disabled
        round
        native-type="submit"
    >测试</my-button>
</template>

Фактически,roundа такжеautofocusни одинMyButtonподдерживаемый компонентprop, так что это отражаетHTMLВыше приведен такой эффект:

Как пользователи, мы должны надеятьсяroundа такжеnative-type="submit"в состоянии достичьel-button, произвести желаемый эффект. Однако,roundа такжеnative-type="submit"Просто повесьте на корневой элементattributeЭто действительно не работало, как должно!

P.S. Например,roundсвойства влияютel-buttonсделатьbuttonпринести одинis-roundизclass, что приводит к закруглению углов!

То есть,inheritAttrsЭффект таков: сделать тех, кто не вpropsсвойства, определенные в , непосредственно сattributeФорма действует на корневой элемент компонента!

Такroundа такжеnative-type="submit"Как это передать?

Прежде всего, вы не можете позволить тем свойствам, которые не идентифицируются пропсами, падать непосредственно на корневой элемент, поэтому вам нужно установитьinheritAttrsдляfalse.

Затем, чтобы получить те свойства, которые не идентифицируются пропсами, и привязать их напрямую кel-button. Точно, Vue предоставляетattrsиспользуется для получения этих свойств, аv-bindОн может привязывать сам объект, который мы легко упускаем из виду!

После обработки прозрачной передачи атрибута нам также необходимо обработать событие, аналогичное$attrs,$listenersТакже возможно получить все прослушиватели событий дочерних компонентов в родительском компоненте, чтобы мы могли использоватьv-onПередайте эти прослушиватели событий из родительского компонента в компонент следующего уровня.

Лучше фото посмотреть!

эквивалентноMyButtonЯвляетсяпосредники, которые не имеют значения, передайте сообщение напрямую! Интуитивно понятно, что объем кода компонентов значительно сокращается, и, что более важно, масштабируемость и ремонтопригодность становятся сильнее!

<template>
    <el-button
        v-bind="customizedAttrs"
        v-on="$listeners"
    >
        <slot />
    </el-button>
</template>

<script>
export default {
    name: "MyButton",
    inheritAttrs: false,
    props: {
        size: {
            type: String,
            default: "medium",
        },
    },
    computed: {
        customizedAttrs() {
            return {
                size: "medium",
                // 支持传过来的size覆盖默认的size
                ...this.$attrs,
            };
        },
    },
};
</script>

Для вызывающего абонента опыт использования совершенно не затрагивается, и он чувствует, что все еще использует его напрямую.el-button, опыт передачи имущества и мониторинга событий не изменился!

<template>
    <my-button
        type="success"
        round
        autofocus
        @click="handleClick"
    />
</template>

Суммировать

комбинироватьinheritAttrs, v-bindтак же какv-on, мы реализовали базовый компонент, поддерживающий прозрачную передачу! Эта статья основана наButtonВзяв в качестве примера компоненты, это введение в прозрачную передачу. На самом деле область применения прозрачной передачи намного больше, чемButtonКомпоненты, мы можем делать более красивые вещи с помощью сквозного доступа! Как у вас с чистотой кода?

Если вы считаете, что эта статья неплохая, пожалуйста, поставьте лайк и подпишитесь (Фронтенд Саймон), искренне благодарим вас за поддержку. Вы также можете общаться со мной напрямую, яlaobaife, и с нетерпением ждем прогресса вместе с вами!