寫SDK項目的時候遇到了壹個問題:在直播間初始化SDK時使用默認主題，在主題頁面初始化SDK時使用其他主題。打包時默認主題掛在多個頁面的全局環境中，初始化SDK時需要傳入自定義主題。
實現起來很簡單，判斷有沒有自定義主題，有就用自定義主題，沒有就用默認主題。該項目的大部分基本組件如下:
從“lib/preact”導入{ h，Component }
從“lib/csjs”導入csjs
從“庫/平臺”導入{主題}
const styles = csjs
。app {
背景:$ { theme . color }；
}
`
導出默認類應用程序擴展組件{
渲染(
& lt' styles.app ' & gt& lt/p & gt；
)
}自定義主題通過初始化SDK傳入，子組件可以通過props或context獲取，但不能直接在類外的樣式中使用。
那麽如何在組件之外使用父組件的道具呢？如果我們能把需要使用的道具掛在“全局環境”裏，那麽我們就可以隨意使用。
項目結構如下:
。
|——src
| |-圖書館//公共圖書館
| |-服務//抽完的方法。
| |——index.js
└──App
└──app.js
└-...首先，在服務中創建新的customTheme.js文件，內容如下:
假設值= {}
export default () = >{
const setTheme =(init color)= & gt；{
值= initColor
}
const getTheme =()= & gt；{
返回值
}
返回{
設置主題，
getTheme，
}
}在index.js文件中，我們可以得到初始化SDK時傳入的自定義主題對象，這裏我們將這個對象存儲在customTheme.js中的值中:
從“”導入自定義主題。/services/customTheme
...
const setTheme =(custom theme()| | { })。設置主題
setTheme & amp& ampsetTheme(自定義主題)
...以便您可以在其他地方直接獲得customTheme的值。
從“lib/preact”導入{ h，Component }
從“lib/csjs”導入csjs
從“庫/平臺”導入{主題}
從'導入自定義主題'../services/customTheme
const getTheme =(custom theme()| | { })。getTheme
const custom _ theme = getTheme & amp；& ampgetTheme()
const styles = csjs
。app {
背景:$ { custom _ theme . color | | theme . color }；
}
`
導出默認類應用程序擴展組件{
渲染(
& lt' styles.app ' & gt& lt/p & gt；
)
}以上是我給大家整理的，希望以後對大家有幫助。
相關文章:
參考VUE bmob js-SDK(詳細教程)
如何在vue中通過v-for處理數組
如何用vue實現收藏夾
node.js中npm和webpack的配置方法
如何通過js格式化當前時間？