Vue mixin для использования с дочерними компонентами

Я создал многослойный раскрывающийся компонент под названием <my-dropdown>, который принимает как минимум props: ['options']. Параметры могут быть одномерным массивом или массивом объектов, каждый со своим собственным массивом options. Я отслеживаю выбранный вариант с помощью массива индексов (например, «Вниз» будет [1,3]).

const ddOptions = [
    "All",
    {
        "name": "Turtles",
        "options": ["All", "The", "Way", "Down"]
    }
]

Я пытаюсь решить, как справиться с установкой метки раскрывающегося списка (текущий выбор) и использованием текущего выбора в родительском элементе. Мое текущее решение - использовать миксин под названием dropdownParentMixin, который используется везде, где используется раскрывающийся список, который берет путь к полученному индексу от родителя, вычисляет метку и все остальное в выбранной опции и передает метку обратно в раскрывающийся список.

Падать:

<template>
    <span>{{label}}</span>
    <my-menu 
        :options="options"
        @choose="setChoice"
    ></my-menu>
</template>
<script>
    module.exports = {
        props:["label", "options"],
        methods: {
            setChoice: function(index_path){
                this.$emit('change',index_path)
            }
        }
    }
</script>

Родитель:

<template>
    <my-dropdown
        :options="ddOptions"
        :label="label"
        @change="handleChange"
    ></my-dropdown>
</template>
<script>
    module.exports = {
        mixins: [dropdownParentMixin],
        methods: {
            handleChange: function(index_path){
                // defined in mixin
                this.setPath(index_path)
            },
            doSomething: function(){
                // use this.path
            }
        }
    }
</script>

Mixin

const dropdownParentMixin = {
    methods: {
        setPath: function(path){
            this.path = path
        },
        getElement: function() {
            // drill down to the correct element in ddOptions
            this.label == ddOptions[...].label
            this.someAttribute = ddOptions[...].attribute
        }
    },
    /*computed: {
        label: function(){
            // some magic based on this.path
            return computedLabel
        }
    }*/
}

У меня вопрос: Требовать Mixin для использования компонента - плохая практика? Если да, то какие еще способы решения проблемы?

Да, это плохая практика. Почему бы просто не разместить вычисленный label в самом раскрывающемся компоненте?

thanksd 13.09.2018 20:27

Я мог вычислить label из раскрывающегося списка. Проблема в том, что метки не обязательно уникальны, поэтому именно index_path идентифицирует выбранный вариант. Я предполагаю, что одним из способов может быть обновление модели данных, чтобы каждая опция имела уникальный идентификатор.

Adam M Thompson 13.09.2018 20:35

Я не уверен, что вы имеете в виду. В раскрывающемся списке есть только одна опора label, и, поскольку вы знаете index_path в методе setChoice, какая информация вам не хватает в этом контексте?

thanksd 13.09.2018 20:39

Ах я вижу. label уникален с точки зрения раскрывающегося списка и может быть легко вычислен из раскрывающегося списка. Проблема в том, что я хочу использовать this.path и получить атрибуты элемента из родительского элемента. Это приведет к дублированию большого количества кода, поскольку итерация в методе getElement() (ранее вычисление label()) аналогична таковой в doSomething().

Adam M Thompson 13.09.2018 21:19

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

thanksd 13.09.2018 21:36

Спасибо. Да, уточняя вопрос, я сам на него ответил. Я думаю, что выпадающий список выполнит вычисления и отправлю объект обратно родительскому объекту как событие.

Adam M Thompson 13.09.2018 21:43
0
6
553
0

Другие вопросы по теме