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

Question

I have two Vue components, one extends the other:

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

As described in the docs , CompB's options are merged into CompA's, resulting:

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

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

However my desired result is having property value1 removed:

{
    props: {
        value4: Object
    },

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

I think it should be possible using Custom Option Merge Strategies

But even if I return null or undefined , the property isn't removed.

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

Is it even possible to such thing? If yes, how?

Answer 1

This is my own solution that finally worked for me: delete the property manually in beforeCreate() .

This is very similar to Bert's answer.

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

Answer 2

It's not quite clear to me how Vue.config.optionMergeStrategies works but this does work in a test environment.

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,

    props: {
        value4: Object
    },

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

Essentially, delete the props you do not want before you extend the component.

Answer 3

Don't know why you need it. But you could also do it like following:

• With Object.assign :

   extends: Object.assign({}, compA, { props: { value4: Object } }),

• With spread-operator ...compA :

   extends: { ...compA, props: { value4: Object } }

Please have a look at the demo below or this fiddle .

 const compA = { name: 'CompA', template: ` <div> <h2>{{$options.name}}</h2> props: <br/> <span v-if="$options.name === 'CompA'">1 - {{value1}}<br/></span> <span v-if="$options.name === 'CompB'">4 - {{value4}}<br/></span> {{value2}}<br/> {{value3}} </div> `, props: { value1: Object, }, data: function() { return { value2: 'hello2 from A', value3: 'hello3 from A' } } } const compB = { name: 'CompB', extends: Object.assign({}, compA, { props: { value4: Object } }), /* // with spread operator { ...compA, props: { value4: Object } },*/ data: function() { return { value2: 'hello2 from B' } } } console.log('no prop value1', compB) new Vue({ el: '#app', components: { compA, compB } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script> <div id="app"> <comp-a :value1="{id: 2}"> </comp-a> <comp-b :value1="{id: 4}" :value4="{id: 9}"> </comp-b> </div>