将属性注入插槽内的 Vuetify 组件

Question

我的应用程序有“查看”和“编辑”模式，在“查看”模式下，我需要将所有控件设置为只读。

我创建了一个带有单个插槽的 InputWrapper 组件，我的目标是将 readonly 属性注入其中的 v-autocomplete 组件。在 InputWrapper 的 mounted 生命周期事件中，我可以访问 this.$slots.default[0].componentInstance.propsData，但是当我将 readonly 属性设置为“”（这是我直接设置 v-autocomplete 的 prop 时出现的值），什么都没有发生。我也尝试在 componentOptions 中设置它。有什么办法可以实现吗？

这是我目前拥有的：

<template>
    <v-col :cols="cols" :class="{ 'input-wrapper': true, readonly: isReadOnly }">
        <slot></slot>
    </v-col>
</template>

<script>
    export default {
        name: 'InputWrapper',
        mounted() {
            if (this.isReadOnly) {
                this.$set(this.$slots.default[0].componentOptions.propsData, 'readonly', '');
            }
        },
        computed: {
            isReadOnly() {
                return this.readonly || this.$route.params.action === 'view';
            }
        },
        props: {
            readonly: {
                type: Boolean
            },
            cols: {
                type: Number
            }
        }
    };
</script>

Answer 1

最后，我决定扩展 VAutocomplete，并覆盖 isReadonly computed 属性。由于我有一个特殊情况，我也需要在视图模式下启用控件，因此我将 readonly 属性的默认值设置为 null。

<script>
    import { VAutocomplete } from 'vuetify/lib';

    export default VAutocomplete.extend({
        name: 'auto-complete',
        computed: {
            isReadonly() {
                return 
                    this.readonly ||
                    (this.$route.params.mode == 'view' && this.readonly !== false);
            }
        },
        props: {
            readonly: {
                type: Boolean,
                default: null
            }
        }
    });
</script>

将属性注入插槽内的 Vuetify 组件

Inject property into Vuetify component inside a slot

vue.js

vuetify.js

将 属性 注入插槽内的 Vuetify 组件

Inject property into Vuetify component inside a slot

vue.js

vuetify.js

将属性注入插槽内的 Vuetify 组件