扩展 Vuetify 组件

For example, I want to create <v-city></v-city> component that extends v-select with minimal props, async items loaded and one of items selected.

我已经开始使用 template

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

和脚本

<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>

推荐答案

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

To answer on my own question: use v-bind="this.$attrs" to get all "parent" attributes applied on child component. Also use this.$listeners.input to change value. Probably not ideal and only solution, but it works.

这篇关于扩展 Vuetify 组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！