17.scoped样式

我们来看下面的例子

main.js

import Vue from 'vue'
import App from './App.vue'
// import {plugins} from "eslint-plugin-vue/lib/configs/base";
//关闭vue的生产提示
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
}).$mount('#app')

App.Vue

<template>
  <div>
    <School />
    <Student/>
  </div>


</template>

<script>
//引School组件
import School from "@/components/School";
import Student from "./components/Student"
export default {
  name: 'App',
  components : {School,Student},
}
</script>

<style>

</style>

查看School.Vue

<template>
  <div class="demo">
    <h2> 学校名称 {{ name }}</h2>
    <h2> 学校地址 {{ address }}</h2>
  </div>
</template>

<script>
export default {
  name: "School",
  data(){
    return {
      name: '苑庄小学',
      address: '金辉大厦',
    }
  }
}
</script>

<style>
  .demo {
    background: orange;
  }
</style>

查看Student.Vue

<template>
  <div class="demo">
    <h2> 学生姓名 {{ name }}</h2>
    <h2> 学生年龄 {{ age }}</h2>
  </div>
</template>

<script>
export default {
  name: "Student",
  data(){
    return {
      name: '代亮',
      age: '18',
    }
  }
}
</script>

<style>
.demo {
  background: blue;
}
</style>

我们故意把上面两个组件的style中的 样式名称都设置为一样的，但是颜色不一样
最终我们发现我们只选取了一个，并且因为我们先引入的School组件，所以颜色都是蓝色的

所以我们在组件中的style标签中增加 scoped属性

所以我们可以修改两个组件中的style，增加scoped

<style scoped>
  .demo {
    background: orange;
  }
</style>