vue自学入门-7（vue style scope）

vue自学入门-1（Windows下搭建vue环境）

vue自学入门-2（vue创建项目）

vue自学入门-3（vue第一个例子）

vue自学入门-4（vue slot）

vue自学入门-5（vuex state）

vue自学入门-6（vue jsx）

vue自学入门-7（vue style scope）  

vue自学入门-8（vue slot-scope）

通过在style 上加scope可以避免影响其它组件

修改app.vue 、helloworld.vue style 代码如下

1、都不加scope

<style>
div {
  color:green
}
</style>

<style>
div{
  color:red
}
</style>

使用的子组件样式

2、子组件加scope

<style>
div {
  color:green
}
</style>

<style scoped>
div{
  color:red
}
</style>

 

 加scoped不影响父组件

3、父组件加scope

<style  scoped>
div {
  color:green
}
</style>
<style>
div{
  color:red
}
</style>

 

 加scoped不影响子组件

4、如果想让父组件影响加了scoped的子组件可以这样写

<style  scoped>
div>>>div {
  color:green
}
</style>