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>