Как хранить дополнительные данные компонентов?

Question

[Александр Маджугин]

Есть компонента который должен переключать N других дочерних компонентов. Например компонент с контактами офисов. Контакты офисов могут быть допустим представлены, на карте, списком, плитками и бог знает какими еще видами.
(у меня сейчас компонент который должен переключать 7 дочерних компонентов альтернативных и могут добавиться еще).
Хочется всю информацию необходимую для переключения спрятать в эти дочерние компоненты. Я сделал так - добавил в дочерних компонентах свойство options и поместил туда описание компонента, а в родительском компоненте просто просматривают подключенные компоненты и собираю список для переключения:

export const ContactsMap = {
    options: {
        type: 'contactsview',
        title: 'показать на карте',
        image: ''
    },
...........

В родительском:

export const Contacts = {
    components: {
            Filter: ContactsFilter,
            Map: ContactsMap,
            List: ContactsList,
        },
    created () {
        for (let LocalName in this.$options.components) {
            let component = this.$options.components[LocalName];

            if (component.options && component.options.type == 'contactsview') {
                this.views[LocalName] = component.options;
            }
        }
    },

Т.е. для хранения дополнительные опций компонента я использую options. Но может быть есть какое-то соглашение по именованию таких свойств? Или вообще другая практика хранения таких свойств?

Answer 1

[5465]

Использование свойства "options" для хранения дополнительных данных компонентов является допустимой практикой, но может быть не совсем удобным, если вы используете множество компонентов и опций.

Для более удобного хранения и передачи дополнительных данных компонентов, можно использовать объект "props". Props - это свойства, которые можно передавать в компоненты, а также хранить в них дополнительную информацию.

Пример использования props для хранения данных компонента:

// Дочерний компонент
export default {
props: {
type: String,
title: String,
image: String
},
// ...
}

// Родительский компонент
export default {
components: {
ContactsFilter,
ContactsMap,
ContactsList
},
data() {
return {
views: [
{
type: 'contactsview',
title: 'показать на карте',
image: ''
},
// ...
]
}
}
// ...
}

В этом примере, свойства компонента (type, title, image) объявлены как props, а затем передаются в дочерний компонент при его использовании в родительском компоненте.

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

Answer 2

[Александр Маджугин]

Если бы современные трасформеры могли ответить на этот вопрос, я бы вообще сюда не пришел.