<!--只認識三個標籤-->
<template>
 <!--元件結構-->
  <div>
    <h1 id="hh">{{schoolname}}</h1>
      <button @click="showdom">點我</button>
    <h2 ref="sss">{{adress}}</h2>
    <Student ref="student"></Student>
  </div>
</template>

<script>

    /*元件引入*/
    import Student from './student'

    /*元件互動程式碼js*/
    export default {
        name: "School",
      data(){
        return {
          schoolname:"六中",
          adress:"福建"
        }
      },methods:{
            /*有時候我們需要獲得dom元素*/
            showdom(){
                /*使用原來的dom有違背Vue的初衷(需要配置id通過document獲得)*/
                console.log(document.getElementById("hh"))
                /*於是vue引入了ref*/
                console.log(this)/*現在輸出this：是vc物件*/
                /*通過this.$refs.名字獲得*/
                console.log(this.$refs.sss)
                /*那麼ref可以當成id使用*/
                /*當ref放在註冊的元件的時候會得到什麼*/
                console.log(this.$refs)/*直接獲得所有dom元素的陣列*/
                console.log(this.$refs.student)/*獲得的是元件物件：用於元件通訊*/
            }

        },
      components:{
        Student
      }
    }
</script>

<style scoped>


</style>