關於 vue 元件間的樣式問題，一直困擾我。父與子，子與父，兄弟元件間相互的樣式汙染，再加上 scoped 作用域的作用，導致我們很難搞清楚之間的相互關係，今天我們就來一**竟；
// 父元件
// 子元件
通過現象可以看到，父元件的樣式覆蓋了子元件的樣式；但是為什麼會這樣呢？按照我的理解，每個 vue 元件都有自己的生命週期，父元件在執行自己的生命週期時，發現需要載入子元件，於是父元件等待子元件執行自己的生命週期，待子元件載入完畢之後，父元件接著執行完自己的生命週期（父元件的生命週期先開始但是後結束）。所以在這個過程中，子元件的樣式先載入，父元件的樣式後載入，於是父元件的樣式覆蓋了子元件的樣式。
// childcom
// otherchildcom
// 父元件
childcom 元件裡面設定 h2 的背景顏色為藍色，otherchildcom 元件裡面設定 h2 的背景顏色為紅色；
我們可以看到 otherchildcom 裡面的樣式覆蓋了 childcom 的樣式。這和元件的載入順序（import的順序，不是在html裡面的順序）有關；如果我們更換子元件的載入順序，那麼 childcom 的樣式會覆蓋 otherchildcom；
scoped 屬性會給當前元件的根元素、元件自身的後代元素和子元件的根元素新增乙個 data-v-x 屬性。
// 父元件
// 子元件
父元件 style 標籤中有 scoped 屬性，子元件的 style 標籤中沒有 scoped 屬性，於是在 html 中的體現如下：
我們看到父元件的根元素，父元件的後代元素以及子元件的根元素上都被新增上了 data-v-x 屬性；
如果父子元件的style標籤上都加了 scoped 屬性呢？
我們看到這時子元件的根元素和子元件的後代元素上也都新增上了 data-v-x 屬性，這樣子元素的根元素上就被新增上了兩個data-v-x屬性；
接下來我們來**對具體樣式的影響：
// 父元件
// 子元件
父元件的 scoped 標籤會在 css 上生成相應的屬性原則器，這樣父元件的樣式就不會作用到子元件上了。
// 父元件
// 子元件
同樣，子元件上回生成相對應的屬性選擇器，一樣也不會作用到父元素。
父子元件會生成各自對應的屬性選擇器，這樣父子元件之間不會被相互影響。
// 父元件
background-color: red;
}// 子元件
// 父元件
background-color: red;
}// 子元件
該操作會增加選擇器的權重，來讓父元件的樣式覆蓋到子元件；
// 父元件
background-color: red;
}// 子元件
因為這時候父元件選擇器的權重還是沒能幹過子元件選擇器的權重，於是還是會顯示子元件的樣式。 Vue 元件間的樣式衝突汙染
一 汙染是如何產生的？得益於 vue loader，在 vue 中可以使用類似於 web component 的元件化寫法,在大多數情況下，我們希望元件間定義的樣式是相互隔離的，在 weex 當中的確如此，元件天生隔離，可是在 vue 當中，執行的載體還是瀏覽器，所有的樣式類還是會通過 style ...
Vue元件間的通訊
1 父子元件之間的通訊 a 父 子 父元件傳遞資料給子元件 使用props b 子 父 在父元件上呼叫子元件內定義的方法 使用ref c 子 父 父元件獲取子元件內的資料 使用ref d 子 父 子元件內觸發事件，父元件監聽事件 使用 emit 可以把看成是乙個普通的html元素，註冊了dialog...
Vue 元件間的通訊
元件 component 是 vue.js 最強大的功能之一。元件可以擴充套件 html 元素，封裝可重用的 元件系統讓我們可以用獨立可復用的小組件來構建大型應用，幾乎任意型別的應用的介面都可以抽象為乙個元件樹 上面展示的可以引入所有 vue 元件的關係形式 使用props，父元件可以使用props...