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

【问题标题】：Inject property into Vuetify component inside a slot将属性注入插槽内的 Vuetify 组件
【发布时间】：2021-12-06 13:55:15
【问题描述】：

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

我创建了一个带有单个插槽的 InputWrapper 组件，我的目标是将 readonly 道具注入其中的 v-autocomplete 组件。在 InputWrapper 的挂载生命周期事件中，我可以访问 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>

【问题讨论】：

我们可以看代码示例吗？它是什么 Vuetify 组件？
它是 v-autocomplete，但也可以应用于 v-text-field。我添加了代码
好像只设置了一次。上山。你可以试试看，并根据 isReadOnly 值更新 this.$set 为只读值null 或'readonly'。
我试过了，没有成功。最后，我决定扩展 VAutocomplete，并覆盖 isReadonly 计算属性

标签： vue.js vuetify.js

【解决方案1】：

最后，我决定扩展 VAutocomplete，并覆盖 isReadonly 计算属性。由于我有一个特殊情况，我也需要在视图模式下启用控件，因此我将 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>

【讨论】：