Vue.js 具有可选值prop的组件

我正在写一个可重用的组件。它基本上是一个带有标题和主体的部分，如果单击标题，主体将展开/折叠

我希望允许组件的使用者使用

v-model

将布尔值绑定到它，以便它可以在任何需要的条件下展开/折叠，但在我的组件中，用户可以单击展开/折叠

我已经让它工作了，但是它要求组件的用户使用v-model，如果他们不使用，那么组件就不能工作

我基本上希望消费者决定他们是否关心能够看到/更改组件的状态。如果没有，则不必为组件提供

v-model

属性

以下是我的组件的简化版本：

<template>
    <div>
        <div @click="$emit('input', !value)">            
            <div>
                <slot name="header">Header</slot>
            </div>
        </div>
        <div :class="{ collapse: !value }">        
            <div class="row">
                <div class="col-xs-12">
                    <div>
                        <slot></slot>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import { Vue, Component, Prop } from "vue-property-decorator";   


    @Component
    export default class CollapsibleSection extends Vue {
        @Prop({ default: true }) public value: boolean;
    }
</script>

标题
从“Vue属性装饰器”导入{Vue，Component，Prop}；
@组成部分
导出默认类可折叠节扩展Vue{
@Prop（{default:true}）公共值：布尔值；
}

更新： 我想出了一个在功能上满足我要求的解决方案。这比我希望的要详细一点，所以如果有人有更简洁的解决方案，我很乐意阅读，如果它能以更少的代码/标记满足我的要求，我会很高兴地将其标记为可接受的答案

<template>
    <div>
        <div @click="toggle">            
            <div>
                <slot name="header">Header</slot>
            </div>
        </div>
        <div :class="{ collapse: !currentValue }">        
            <div class="row">
                <div class="col-xs-12">
                    <div>
                        <slot></slot>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import { Vue, Component, Prop, Watch } from "vue-property-decorator";   


    @Component
    export default class CollapsibleSection extends Vue {
        @Prop({ default: true }) public value: boolean;

        public currentValue = true;

        public toggle() {
            this.currentValue = !this.currentValue;
            this.$emit('input', this.currentValue);
        }

        public mounted() {
            this.currentValue = this.value;
        }

        @Watch('value')
        public valueChanged() {
            this.currentValue = this.value;
        }
    }
</script>

标题
从“Vue属性装饰器”导入{Vue，组件，道具，手表}；
@组成部分
导出默认类可折叠节扩展Vue{
@Prop（{default:true}）公共值：布尔值；
public currentValue=true；
公共切换（）{
this.currentValue=！this.currentValue；
此.emit（'input'，此.currentValue）；
}
公众乘车（）{
this.currentValue=this.value；
}
@监视（‘值’）
公共价值变动（）{
this.currentValue=this.value；
}
}

您的更新可以正常工作，并且通常具有正确的要点，但是最好使用计算属性，而不是观察者。有关更多信息，请参阅

我在下面的代码片段中排除了类表示法，使其能够在现场运行

Vue.component（'expandable'{
道具：{
价值：{
//只是为了明确，不是必需的
默认值：未定义，
验证器（值）{
返回typeof value===“boolean”| typeof value===“undefined”；
},
},
},
模板：`
切换

`,
数据（）{
返回{
内在价值：正确，
};
},
计算：{
isOpen（）{
return（typeof this.value！=“undefined”）？this.value:this.internalValue；
},
},
方法：{
切换（）{
this.internalValue=！this.internalValue；
this.emit（'input'，！this.isOpen）；
}
}
});
新Vue({
el:“#应用程序”，
数据（）{
返回{
伊索彭：错，
}
}
})

。可扩展{
边框：2件纯蓝；
边缘底部：1rem；
}

无模型

有模型

嘿，你能澄清一下你真正想做什么吗？这真的很难理解。如果我的组件可以用作

…

，那么我希望允许消费者提供

v型

，以便他们能够了解当前状态并进行更改；但是，我不想要求他们提供一个（如果他们不提供，他们就无法知道或更改状态，但这没关系，因为他们没有提供

v-model

）。我刚刚提出了一个解决方案，我将发布，但它有点冗长，所以我很高兴了解一种更简洁的方法来提供相同的功能。最终我希望没有“内在价值”，但我越想它，我认为这是不可能的。您的解决方案用更少的代码解决了问题，这让我很高兴。谢谢@BrianBall是的，如果没有某种内部变量，您将没有任何东西可以绑定更新-默认的prop值是一个无法写入的不可变值。