今天在敲代碼的時候,做了一個總體的父組件頁面,樣式都寫好了。想著寫個子組件,在父組件中引用,結果,發現問題了:盡管父組件寫好了樣式并引用了,子組件也在模板上應用了對應的class,但是就是不起作用。為此,翻了一下官方文檔,果然找到料
resolve
簡單啦,我只要在父組件要應用到子組件的樣式類前面加個 /deep/
就好啦。
然而,sass編譯器告訴我編譯錯誤
error
其實這樣直接編譯是可以的,只是看不慣赤裸裸的錯誤提示,所以靈機一動,把/deep/
變成變量就好了
pass
ok,可以繼續敲代碼了 = = ||
16-11-25 更
今天遇到了新的需求:已知有了一個父組件
父組件
父組件的模板引用了一個子組件:
父組件模板
子組件
子組件呢還能動態添加子組件,就叫孫組件吧-_- ||,嵌套于之中。
所以問題來了,我們已經知道在父組件的樣式加上 /deep/
就能將樣式應用于全部的子組件中,但是現在我并不想要在父組件下控制子組件的樣式,在父組件中只需要給自組件的上一層加點樣式,所以還是依然可以直接使用 /deep/
,就像
父組件
所有之間的樣式都會應用到 .content
下面,所以子組件默認被應用了。這是我之前說的。
現在有新的需求,子組件管理自己以及內部(動態創建的孫組件)的樣式,為了方便后來的樣式提取(我是這樣想的-_- )。
ok,按照前面的思路,就是給子組件的樣式加個 /deep/
就好了,但是最終的結果就是子組件的樣式會覆蓋到全局去,WTF!
于是又查了文檔,發現了料
host
那我直接選擇子組件的上一層,再加個 /deep/
應用所有孫組件不就行了,就像
子組件樣式
對于sass的,要轉為變量 #{':host'}
不然編譯后沒有效果。
結果發現符合預想,ok 可以繼續敲代碼了 -_- ||