javascript - VueJS extend component: remove parent's property -
i have 2 vue components, 1 extends other:
// compa.vue export default { props: { value1: object, }, data: function () { return { value2: 'hello2 a', value3: 'hello3 a' } } } // compb.vue import compa './compa.vue'; export default { extends: compa, props: { value4: object }, data: function(){ return { value2: 'hello2 b' } } }
as described in docs, compb's options merged compa's, resulting:
{ props: { value1: object, value4: object }, data: function () { return { value2: 'hello2 b', value3: 'hello3 a' } } }
however desired result having property value1
removed:
{ props: { value4: object }, data: function () { return { value2: 'hello2 b', value3: 'hello3 a' } } }
i think should possible using custom option merge strategies
but if return null
or undefined
, property isn't removed.
vue.config.optionmergestrategies.data = function(parentval, childval) { return null; };
is possible such thing? if yes, how?
it's not quite clear me how vue.config.optionmergestrategies
works work in test environment.
import compa './compa.vue'; // make deep clone copy of compa. here i'm using made copy // function use lodash or other library. not use // json.parse(json.stringify(...)) because lose functions. // object.assign not work because object.assign performs shallow // copy (meaning if delete props, nested object, // still globally delete property). import copy "./utils" //copy compa let newcompa = copy(compa) // delete desired props delete newcompa.props.value1 export default { // extend copy extends: newcompa, props: { value4: object }, data: function(){ return { value2: 'hello2 b' } } }
essentially, delete props not want before extend component.
Comments
Post a Comment