🥦 Vue ref属性

This post is also available in English and alternative languages.

ref 是 Vue 中的一个特殊属性，它用于给元素或组件注册一个引用。在 Vue 实例中，可以使用 ref 来引用DOM元素或子组件，并在需要的时候直接访问它们。

1. 在HTML标签中使用

给 HTML 标签加上 ref 属性并指定属性名，就可以在 Vue 中通过 vm 实例的 $refs 属性获取到对应的 ref 属性值的标签。

• person.vue（person组件）

  <template>
    <div id="temp">
      <h2>{{ myName }}</h2>
      <h2>{{ mySex }}</h2>
      <h2>{{ myAge }}</h2>
      <h2>{{ myJob }}</h2>
      <h2>{{ myAddress }}</h2>
    </div>
  </template>
  
  <script>
  export default {
    name: '
      ',
    data() {
      return {
        myName: '123ccc',
        mySex: 'man',
        myAge: 20,
        myJob: 'engineer',
        myAddress: 'nanjing'
      };
    },
  }
  </script>
  
  <style scoped lang="scss">
      // ...
  </style>

• App.vue

  <template>
    <div id="app">
      <h2 ref="content">测试页面</h2>
      <PersonComponent></PersonComponent>
      <button @click="getDomData">获取DOM结构</button>
    </div>
  </template>
  
  <script>
  
  import PersonComponent from "@/components/person.vue";
  
  export default {
    name: 'App',
    components: {
      PersonComponent
    },
    methods: {
      getDomData() {
        console.log(this.$refs.content)
      },
    }
  }
  </script>
  
  <style>
      // ...
  </style>

2. 在组件标签中使用

在组件标签中添加 ref，通过 $refs 拿到的是子组件的实例对象 VueComponent。

• person.vue（person组件）

  <template>
    <div id="temp">
      <h2>{{ myName }}</h2>
      <h2>{{ mySex }}</h2>
      <h2>{{ myAge }}</h2>
      <h2>{{ myJob }}</h2>
      <h2>{{ myAddress }}</h2>
    </div>
  </template>
  
  <script>
  export default {
    name: 'PersonComponent',
    data() {
      return {
        myName: '123ccc',
        mySex: 'man',
        myAge: 20,
        myJob: 'engineer',
        myAddress: 'nanjing'
      };
    },
  }
  </script>
  
  <style scoped lang="scss">
      // ...
  </style>

• App.vue

  <template>
    <div id="app">
      <h2 ref="content">测试页面</h2>
      <PersonComponent ref="person"></PersonComponent>
      <button @click="getDomData">获取DOM结构</button>
      <br>
      <br>
      <button @click="getDomData2">获取DOM接口2</button>
    </div>
  </template>
  
  <script>
  
  import PersonComponent from "@/components/person.vue";
  
  export default {
    name: 'App',
    components: {
      PersonComponent
    },
    methods: {
      getDomData() {
        console.log(this.$refs.content)
      },
      // 通过ref,获得了子组件本身的VueComponent
      getDomData2() {
        console.log(this.$refs.person)
      },
    }
  }
  </script>
  
  <style>
      // ...
  </style>