vue中ref的作用

1. 获取页面的DOM元素

2. 用于组件之间的通信，获取子组件对象

子组件：

<template>
  <div class="Ref">
    11
  </div>
</template>

<script>
export default {
  name: "Ref",
  data() {
    return {
      message: "我是子组件的数据"
    }
  },
  methods: {
    add: function (num1, num2) {
      return num1 + num2
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

父组件

<template>
  <div class="Refs">
    <!--定义ref属性，用来给元素或者子组件注册引用信息，父组件通过$refs获取到对应的DOM对象，和子组件的信息-->
    <p ref="p" id="pId">我是父组件p标签</p>
    <Ref ref="helloWorld"/>
  </div>
</template>

<script>
import Ref from "@/components/Ref";

export default {
  name: "Refs",
  components: {
    Ref
  },
  mounted() {
    //获取DOM元素
    console.log(this.$refs);
    //获取子组件对象
    console.log(this.$refs.helloWorld.message);
    console.log(this.$refs.helloWorld.add(1, 2));//3
  },
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25