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>