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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

<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>