我有两个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' } } }
{ 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' } } }
基本上,在扩展组件之前删除不需要的道具.