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>