Реквизиты доступа передаются дочернему элементу без их определения

#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 в своем компоненте «человек посередине» (или оболочка).


Считывание Атрибутов, Не относящихся к реквизиту

Кроме того, если вы заинтересованы в создании так называемых компонентов «прозрачной оболочки», посмотрите выступление Криса Фрица — у него есть для вас несколько хороших советов и «хитростей»…