<template>
<div>
<h1 v-text="msg" ref="title"></h1>
<button @click="showDOM">点我输出上方的DOM元素</button>
<School/>
</div>
</template>
<script>
import School from './components/School'
export default{
name:'App',
components:{
School
},
data() {
return {
msg:'欢迎学习vue！'
}
},
methods:{
showDOM(){
console.log(this.$refs.title)
}
}
}
</script>
<style>
</style>
<template>
<div class="school">
<h2>学校名称：{{name}}</h2>
<h2>学校地址：{{address}}</h2>
</div>
</template>
<script>
export default{
name:'School',
data() {
return {
name:'尚硅谷',
address:'北京'
}
},
}
</script>
<style>
.school{
background-color: grey;
}
</style>