vue自学入门-7（vue style 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>