vue-ref属性

1.用来给元素或者子组件注册引用信息（id的替代者）

2.应用在html标签上获取的是真是的DOM元素，应用在组件标签上是组件实例对象

子组件：

查看代码

<template>
  <div class="demo">
    <h2>学校名称:{{name}}</h2>
    <h2>学校地址:{{address}}</h2>
  </div>
</template>

<script>
export default {
  name: 'School',
  data () {
    return {
      name: "亚历山大",
      address: "beijing"
    }
  },
}

</script>

<style>
.demo {
  background-color: aquamarine;
}
</style>

父组件：

查看代码

<template>
  <div class="demos">
   

    <h1 id="h1">{{msg}}</h1>

    <School></School>
    <br>
    <button @click="showDom ">点击显示dom元素</button>
  </div>
</template>

<script>

import School from './components/School.vue'
export default {
  name: 'App',
  components: { School },
  data () {
    return {
      msg: 'welcome to'
    }
  },
  methods: {
    showDom () {
      console.log(document.getElementById("h1"))
    }
  }
}
</script>