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>
标签：School,name,样式,demo,color,export,冲突,Scoped,Student From： https://www.cnblogs.com/wsx123/p/17128314.html