在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ vue組件傳入prop以后默認(rèn)值會全部失效嗎

vue組件傳入prop以后默認(rèn)值會全部失效嗎

我想實(shí)現(xiàn)：

在別的地方調(diào)用這個組件的時候，會自定義式的的配置樣式(比如：可以把顏色color傳到props然后來改變這個組件p標(biāo)簽里的文字顏色。)

遇到的問題：

雖然我這樣寫確實(shí)可以實(shí)現(xiàn)調(diào)用組件時自定義樣式，但是有些樣式我希望沒傳的時候也可以留下來，比如這個組件里的getStyle()方法，有color也有font-size。

目標(biāo)：

1.我希望實(shí)現(xiàn)，如果調(diào)用組件時，沒傳style，那么默認(rèn)就是getStyle()里邊color和font-size的值(已實(shí)現(xiàn))。
2.如果調(diào)用組件時，只傳了color，那么color用傳的值，而font-size是否還能用getStyle()這個方法里邊的值呢？(待解決)。
3.如果說，我傳的值除了color還有font-weight這種我沒有寫默認(rèn)值的值，是否也能讓傳入的值，和默認(rèn)樣式中沒有傳到的值(如font-size)也都共存呢？(待解決)。
4.如果我傳入的是font-weight和font-italic這種的(即：全部都是默認(rèn)值沒有定義到的),在這種情況下，是否也能做到傳入的樣式與我的默認(rèn)值樣式共存呢？(待解決)。

下面是我寫的一個小例子：

希望各位大佬幫我看看，萬分感謝！:)

<template>
    <div>
        <p :style="getStyle()">haha</p>
    </div>
</template>
<script>
export default {
    name: 'Test',
    props: {
        textStyle: Object
    },
    methods: {
        getStyle() {
            return this.textStyle || {
                'color': '#999',
                'font-size': '22px'
            }
        }
    }
}
</script>
回答
編輯回答
北城荒

我理解你的問題，是要讓默認(rèn)設(shè)置的 style 屬性 和 外部傳入的屬性做一個合并，如果兩者有相同的屬性，就以外部傳入的為準(zhǔn)，如果外部沒有傳入這個屬性，就使用默認(rèn)值。而對于一些沒有設(shè)置默認(rèn)值的屬性，就是外部傳入什么屬性就使用屬性。

比較簡單的方法，就是用 Object.assign 直接把兩個屬性合并。而且，我建議你使用 computed 計算屬性來，而不是 methods 來定義這個，因?yàn)?計算屬性 能根據(jù)外部屬性變化實(shí)時計算出新的值。

<template>
    <div>
        <p :style="getStyle">haha</p>
    </div>
</template>
<script>
export default {
    name: 'Test',
    props: {
        textStyle: Object
    },
    computed: {
        getStyle() {
            const defaultStyle = {
                'color': '#999',
                'font-size': '22px'
            }
            return Object.assign(defaultStyle, this.textStyle || {})
        }
    }
}
</script>
2017年2月3日 01:01
編輯回答
逗婦乳
    getStyle() {
        return Object.assign({
            'color': '#999',
            'font-size': '22px'
        },this.textStyle)
    }
2018年3月2日 00:33