1：組件樣式衝突問題
默認情況下，寫在.vue組件中的樣式會全局生效，因此很容易造成組件之間的樣式衝突問題。
2：導致組件之間樣式衝突的根本原因是：
單頁面應用程序中，所有組件的dom結構，都是基於唯一的index.html頁面進行呈現，每個組件的樣式都會影響index.html中的dom元素。
3：問題演示
App.vue組件中註冊了私有組件Left.vue，Right.vue組件
在left組件中給<h1>標籤添加了樣式，會影響到right組件中<h1>標籤
可以看到在left組件中添加的h1樣式影響到了h2樣式
4：通過設置scoped解決組件之間樣式衝突問題
5：設置scoped解決組件樣式衝突的原理
在組件中的<style>標籤中設置scoped這個屬性，相當於在這個組件中打了一個標記，在其他組件中使用這個組件時樣式只對這個組件生效，其他組件中的組件沒有這個標記即不生效。
也可以不加這個scoped這個屬性，自定義一個標記進行標識使用
6：使用deep修改子組件的樣式
在left組件和right組件中引入了test組件，現在想在left這個組件中修改test這個子組件中的標籤樣式，發現不起作用。
可以使用/deep/ 語法從父組件中操作子組件
7：/deep/的應用場景
使用vue的組件庫像：Element Ui 或者 Vant，當我們使用組件庫中的組件想修改組件，就可以使用/deep/進行操作第三方組件的樣式
