#javascript #vue.js
Вопрос:
У меня есть компонент, который в основном является посредником для отображения ребенка.
<template>
<component v-bind:is="component" v-bind="$props" @event="captureEvent($event)"></component>
</template>
<script>
export default {
props: {
facet: {
required: true,
type: Object
},
data: {
required: true,
type: Array|Boolean
},
label: {
required: true,
type: String
}
},
methods: {
captureEvent(event) {
},
},
computed: {
component() {
return () => import(`./Layouts/${this.facet.layout.toPascalCase()}`)
}
}
}
</script>
Так что, как вы можете видеть, фактический компонент загружен с помощью настроек. Я не хочу переопределять реквизит для ребенка и среднего мужчины.
Есть ли способ передать их через моего посредника ребенку, не определяя их дважды?
Это ребенок, я пытался использовать $props
объект, но он кажется пустым.
<template>
<div v-show="data.length" class="checkbox-list" :class="{ open }">
<span class="checkbox-list__title">{{ $props['label'] }}</span>
<ul class="checkbox-list__items">
<li>Items</li>
</ul>
</div>
</template>
<script>
export default {
data: function() {
return {
open: false
}
}
}
</script>
Комментарии:
1. Используется версия Vue ?
2. Использование Vue 2.6.7
Ответ №1:
объект $props просто отражает реквизиты, переданные в компонент, которые объявлены в компоненте (используя props: {}
раздел)
Вместо этого вы хотите использовать $attrs
Содержит привязки атрибутов родительской области (за исключением
class
иstyle
), которые не распознаются (и не извлекаются) в качестве реквизитов. Когда компонент не имеет объявленных реквизитов, он, по сути, содержит все привязки родительской области (за исключениемclass
иstyle
) и может быть передан внутреннему компоненту черезv-bind="$attrs"
— полезно при создании компонентов более высокого порядка.
Вы также можете использовать опцию inheritAttrs в своем компоненте «человек посередине» (или оболочка).
Считывание Атрибутов, Не относящихся к реквизиту
Кроме того, если вы заинтересованы в создании так называемых компонентов «прозрачной оболочки», посмотрите выступление Криса Фрица — у него есть для вас несколько хороших советов и «хитростей»…