Question

扩展vue（vuetify）组件v-select的最佳方法是什么。

例如，我想创建<v-city></v-city>组件，该组件使用最小v-select扩展props，加载异步项目并选择其中一项。

我从template

开始

<template>
    <v-select
        :items="items"
        v-model="item"
        required
        return-object
        autocomplete
        item-text="name"
        item-value="id"
    ></v-select>
</template>

和script

<script>
    export default {
        name: 'v-city',
        data()
        {
            return {
                item: null,
                items: [],
                disabled: true
            };
        },
        created()
        {
            this.$http({
                method: 'GET',
                url: '/api.cities'
            })
                .then(response => this.items = response.data)
                .catch(console.warn);
        },
        methods: {},
        watch: {
            item(nv)
            {
                this.$emit('update', nv.id);
            }
        }
    };
</script>

用法： <v-city @update="local.city = arguments[0]"></v-city>

我要归档的是： <v-city v-model="local.city" label="Select city"></v-city>

Answer 1

要回答我自己的问题：使用v-bind="this.$attrs"来获取应用于子组件的所有“父”属性。还可以使用this.$listeners.input来更改值。可能不是理想的唯一解决方案，但它确实有效。

Answer 2

您可以使用v-city包装v-select组件，并通过v-city组件传递道具。您可以根据需要全局定义组件

扩展Vuetify组件

2 个答案: