javascript - VueJS 扩展组件 : remove parent's property

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'
        }
    }
}

如所述in the 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'
        }
    }
}

我认为应该可以使用 Custom Option Merge Strategies

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

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

这样的事情有可能吗？如果是，如何？

Answer 1

这是我自己的解决方案，最终对我有用:在 beforeCreate() 中手动删除属性。

这与 Bert 的回答非常相似。

// 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');
    },
}