VueJS扩展组件：删除父级的属性

Question

我有两个Vue组件，一个扩展了另一个组件：

// CompA.vue

export default {
    props: {
        value1: Object,
    },

    data: function () {
        return {
            value2: 'hello2 from A',
            value3: 'hello3 from A'
        }
    }
}

// CompB.vue

import CompA from './CompA.vue';

export default {
    extends: CompA,

    props: {
        value4: Object
    },

    data: function(){
        return {
            value2: 'hello2 from B'
        }
    }
}

如docs中所述，CompB的选项被合并到CompA的选项中，结果是：

{
    props: {
        value1: Object,
        value4: Object
    },

    data: function () {
        return {
            value2: 'hello2 from B',
            value3: 'hello3 from A'
        }
    }
}

但是我想要的结果是value1删除属性：

{
    props: {
        value4: Object
    },

    data: function () {
        return {
            value2: 'hello2 from B',
            value3: 'hello3 from A'
        }
    }
}

我认为使用自定义选项合并策略应该有可能

但是，即使我返回null或undefined，该属性也不会被删除。

Vue.config.optionMergeStrategies.data = function(parentVal, childVal) {
    return null;
};

这样的事情有可能吗？如果是，怎么办？

Answer 1

这是我自己最终可以使用的解决方案：在中手动删除属性beforeCreate()。

这与伯特的答案非常相似。

// CompB.vue

import CompA from './CompA.vue';

export default {
    extends: CompA,

    props: {
        value4: Object
    },

    data: function(){
        return {
            value2: 'hello2 from B'
        }
    },

    beforeCreate: function(){
        Vue.delete(this.$options.props, 'value1');
    },
}