Vue Mixin для использования с дочерними компонентами - PullRequest
Новая
       10

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

0 голосов
/ 13 сентября 2018

Я создал многослойный раскрывающийся компонент, называемый <my-dropdown>, который принимает как минимум props: ['options']. Опции могут быть одномерным массивом или массивом объектов, каждый из которых имеет свой собственный массив options. Я отслеживаю выбранную опцию с массивом индексов (например, «Down» будет [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 использовал компонент? Если да, то как еще можно решить проблему?

...