vue中如何覆盖组件的props?

Question

template中

<Input size="small" v-bind="prop"></Input>

script中:

export default {
    data() {
        return {
            prop: {
                size: 'large'
            }
        };
    }
};

如题: template中定义了size为small, 想用一个属性覆盖它, 于是乎使用v-bind="{size: 'large'}"的办法, 但是发现不生效, 无法覆盖, 有看过v-bind源码的小伙伴说一下为什么吗?

同时, 有什么办法可以覆盖属性吗?

---

补充一下, vue3 已经支持根据书写顺序决定 props 的优先级了, 因此可以做到 v-bind 覆盖原有属性! 而在 vue2 中, 可以用以下的方法作为简单的替代:

<template>
    <input v-bind="prop" />
</template>

<script>
    export default {
        props: {
            bindProps: Object,
        },
        computed() {
            return {
                size: 'small'
                ...this.bindProps,
            };
        }
    }
</script>

Answer 1

这个问题已经在vue3.0解决了:
https://www.vue3js.cn/docs/zh/guide/migration/v-bind.html#_2-x-语法
现在会默认根据顺序去定义组件的属性, 而不是v-bind外的属性定义为优先了😄

Answer 2

按我的理解，需要覆盖属性，本质就是你这属性需要改变，那为啥不用下面这种去修改，dom和实际逻辑区分开，更好理解与处理

<input :size="size" ></input>
<button @click="changeSize">修改尺寸</button>

export default {
    data() {
        return {
            size: 'small'
        };
    },
    methods:{
        changeSize(){
            this.size = 'large';
        }
    }
};