代码

代码路径

$ tree -N
.
├── App.vue
├── components
│   └── School.vue
└── main.js

App.vue

<template>
  <div>
    <h1 v-text="msg" ref="title"></h1>
    <button ref="btn" @click="showDOM">点我输出上方的DOM元素</button>
    <School ref="sch" />
  </div>
</template>

<script>
import School from "./components/School.vue";
export default {
  name: "App",
  components: { School },
  data() {
    return {
      msg: "hi",
    };
  },
  methods: {
    showDOM() {
      console.log(this.$refs.title); // 真实DOM元素
      console.log(this.$refs.btn); // 真实DOM元素
      console.log(this.$refs.sch); // school组件的实例对象
    },
  },
};
</script>

School.vue

<template>
  <div>
    <h2>学校名称：{{ name }}</h2>
    <h2>学校地址：{{ addr }}</h2>
  </div>
</template>

<script>
export default {
  name: "School",
  data() {
    return {
      name: "shangguigu",
      addr: "beijing",
    };
  },
};
</script>

<style></style>

main.js

import Vue from "vue";
import App from "./App.vue";

Vue.config.productionTip = false;

new Vue({
  el: "#app",
  components: { App },
  render: (h) => h(App),
});

笔记

关于 ref 属性

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