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

<template>

	<div class="demo">

		<h3>学校名称:{{name}}</h3>

	</div>

</template>

<script>

	export default {

		name:'School',

		data(){

			return{

				name:'渲染学校'

			}

		},

	}

</script>

<style scoped>

	.demo{

		color: red;

	}

</style>

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