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

我有两个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
    },value3: 'hello3 from A'
        }
    }
}

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

但即使我返回null或undefined,也不会删除该属性.

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

这样的事情甚至可能吗？如果有,怎么样？

解决方法

我不太清楚Vue.config.optionMergeStrategies如何工作,但这在测试环境中有效.

import CompA from './CompA.vue';
// make a deep clone copy of CompA. Here I'm just using a made up copy
// function but you Could use lodash or some other library. Do NOT use
// JSON.parse(JSON.stringify(...)) because you will lose functions. Also
// Object.assign will not work because Object.assign performs a shallow
// copy (meaning if you delete from props,which is a nested object,you
// will still globally delete the property).
import copy from "./utils" 
//copy CompA
let newCompA = copy(CompA)    
// delete the desired props
delete newCompA.props.value1

export default {
    // extend the copy
    extends: newCompA,data: function(){
        return {
            value2: 'hello2 from B'
        }
    }
}

基本上,在扩展组件之前删除不需要的道具.