Scoped方法（防止样式名称冲突）

App.vue

<template>
    <div>
        <Student/>
        <School></School>
    </div>
</template>
<!-- 
  1.解决标签名称一样，引起样式冲突问题
  写法：1.<style scoped></style>   
          <style lang='css'></style>
  
  
 -->
<script>
    import Student from './components/Student'
    import School from './components/School'
    export default{
        name:'App',
        components:{Student,School}
    }
    
</script>

<style>
</style>

shool.vue

<template>
  <div class="demo">
    <h3>学校名称:{{name}}</h3>
  </div>
</template>

<script>
  export default {
    
    name:'School',
    data(){
      return{
        name:'渲染学校'
      }
    },
  }
</script>

<style scoped> 
  .demo{
    color: red;
  }
</style>

　　student.vue

<template>
  <div class="demo">
    <h3>学生姓名:{{name}}</h3>
    
  </div>
</template>
<!-- 
<style scoped>
  .demo{
    color: #42B983;
  }
</style>

<style lang="css">
  .demo{
    color: #42B983;
  }
</style>
 -->
<script>
  export default {
    name:'Student',
    data(){
      return {
        name:'wei1111 '
      }
    },
  }
</script>


<style lang="less">
  .demo{
    color: #42B983;
  }
</style>