vue组件传入prop以后默认值会全部失效吗

Question

我想实现：在别的地方调用这个组件的时候，会自定义式的的配置样式(比如：可以把颜色color传到props然后来改变这个组件p标签里的文字颜色。)遇到的问题：虽然我这样写确实可以实现调用组件时自定义样式，但是有些样式我希望没传的时候也可以留下来，比如这个组件里的getStyle()方法，有color也有font-size。目标：1.我希望实现，如果调用组件时，没传style，那么默认就是getStyle()里边color和font-size的值(已实现)。2.如果调用组件时，只传了color，那么color用传的值，而font-size是否还能用getStyle()这个方法里边的值呢？(待解决)。3.如果说，我传的值除了color还有font-weight这种我没有写默认值的值，是否也能让传入的值，和默认样式中没有传到的值(如font-size)也都共存呢？(待解决)。4.如果我传入的是font-weight和font-italic这种的(即：全部都是默认值没有定义到的),在这种情况下，是否也能做到传入的样式与我的默认值样式共存呢？(待解决)。下面是我写的一个小例子：希望各位大佬帮我看看，万分感谢！:)hahaexportdefault{name:'Test',props:{textStyle:Object},methods:{getStyle(){returnthis.textStyle||{'color':'#999','font-size':'22px'}}}}

Answer 1

我理解你的问题，是要让默认设置的style属性和外部传入的属性做一个合并，如果两者有相同的属性，就以外部传入的为准，如果外部没有传入这个属性，就使用默认值。而对于一些没有设置默认值的属性，就是外部传入什么属性就使用属性。
比较简单的方法，就是用Object.assign直接把两个属性合并。而且，我建议你使用computed计算属性来，而不是methods来定义这个，因为计算属性能根据外部属性变化实时计算出新的值。
                            

Answer 2

getStyle(){
returnObject.assign({
'color':'#999',
'font-size':'22px'
},this.textStyle)
}