VueJS延伸部件：去除父屬性

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

這不是很清楚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, 

    props: { 
     value4: Object 
    }, 

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

本質上，在擴展組件之前刪除不需要的道具。

Answer 2

這是我自己的解決方案，終於爲我工作：在beforeCreate()手動刪除屬性。

這與伯特的答案非常相似。

// 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 3

不知道爲什麼你需要它。 但你也可以做到這一點像以下：

• 隨着Object.assign：

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

• 隨着spread-operator...compA：

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

請看看下面的演示或者這個fiddle。

const compA = { 
 
    name: 'CompA', 
 
    template: ` 
 
    \t <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 
 
    { 
 
    \t ...compA, 
 
    \t props: { 
 
    \t 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>