【Vue2-02】ref属性

ref属性

1. 被用来给元素或子组件注册引用信息(id的替代者)
2. 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象(vc)
3. 使用方式：
   • 打标识：<h1 ref="xxx">...</h1> 或 <School ref="xxx"></School>
   • 获取：this.$refs.xxx

<template>
  <div>
    <h1 ref="title">获取标题dom元素</h1>
    <School ref="sch"></School>
    <button @click="show">点我输出上方DOM元素</button>
  </div>
</template>

<script>
  // 引入组件
  import School from './components/School.vue'

  export default {
    name: 'App',
    // 注册组件
    components: {
      School,
    },
    methods: {
      show() {
        console.log(this.$refs.title);
        console.log(this.$refs.sch);
      }
    },
  }
</script>

<style scoped>

</style>