Javascript VueJS扩展组件：删除父级'；s属性

我有两个Vue组件，一个扩展另一个：

//CompA.vue
导出默认值{
道具：{
值1：对象，
},
数据：函数（）{
返回{
值2:'hello2来自A'，
值3:'你好，来自A'
}
}
}
//CompB.vue
从“/CompA.vue”导入CompA；
导出默认值{
扩展：康柏，
道具：{
值4：对象
},
数据：函数（）{
返回{
值2:'hello2来自B'
}
}
}

如上所述，CompB的选项合并到CompA的选项中，结果是：

{
道具：{
值1：对象，
值4：对象
},
数据：函数（）{
返回{
值2:'hello2 from B'，
值3:'你好，来自A'
}
}
}

但是，我希望的结果是删除属性

value1

：

{
道具：{
值4：对象
},
数据：函数（）{
返回{
值2:'hello2 from B'，
值3:'你好，来自A'
}
}
}

我认为应该可以使用

但是，即使我返回

null

或

undefined

，属性也不会被删除

Vue.config.optionmergestrages.data=函数（parentVal，childVal）{
返回null；
};

---

这样的事情有可能发生吗？如果是，如何工作？

我不太清楚

Vue.config.optionmergestrages

是如何工作的，但这在测试环境中确实有效

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

---

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

这是我自己的解决方案，最终对我有效：在

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

---

不知道你为什么需要它。 但你也可以像下面这样做：

• 使用

  对象。分配
  ：
  
  extends: Object.assign({}, compA, {
      props: {
          value4: Object
      }
  }),
  
  

• 使用

  …compA

  ：

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

请看下面的演示或这个

const compA={
名称：'CompA'，
模板：`
{{$options.name}
道具：

1-{{value1}}

4-{{value4}}

{{value2}}

{{value3}}
`,
道具：{
值1：对象，
},
数据：函数（）{
返回{
值2:'hello2来自A'，
值3:'你好，来自A'
}
}
}
常数compB={
名称：“CompB”，
扩展：Object.assign（{}，compA{
道具：{
值4：对象
}
}),
/*
//使用扩展运算符
{ 
…公司，
道具：{
值4：对象
}
},*/
数据：函数（）{
返回{
值2:'hello2来自B'
}
}
}
console.log（'no prop value1'，compB）
新Vue({
el:“#应用程序”，
组成部分：{
康帕，
康普
}
})

您是否只想删除正在扩展的对象的所有属性？不，只删除特定的属性。虽然我知道了，但我的方法与您的方法非常相似。但是我会接受你的，因为它也适用，你应得的。虽然我必须注意删除删除了“全局”属性，造成了副作用，例如，当使用COMPA而不扩展它时，无论如何都会删除属性（因为删除语句由于遵守在一起而运行）。但这超出了问题的范围。@balping我只是在研究这个问题。我认为你的解决方案可能更好。我正在试用一份CompA，但效果不理想。如果我让它起作用，我会发布解决方案。@balping好的，它起作用了。我被对象绊倒了。分配做一个浅克隆。谢谢。我需要它，因为我想使用CompB中的属性作为可变数据，而不是不可变的属性，但同时保留名称。如果它没有从道具中移除，您可以在data（）中定义它，它仍然是道具。也许这不是最佳实践，但只要它以一种可靠的方式工作，我真的不在乎。