vue中ref的作用

最新推荐文章于 2024-04-30 11:50:34 发布

学习前端的渣渣

最新推荐文章于 2024-04-30 11:50:34 发布

阅读量407

点赞数

分类专栏：前端面试题 vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/fangqi20170515/article/details/126681153

版权

前端面试题同时被 2 个专栏收录

103 篇文章 2 订阅

订阅专栏

vue

45 篇文章 0 订阅

订阅专栏

本文详细介绍了在Vue.js中如何通过$refs进行组件间的通信，包括如何获取DOM元素以及子组件对象。在父组件中，利用$refs可以访问到子组件的方法和数据，例如调用子组件的add方法进行加法运算。同时，文章通过实例展示了如何在模板中定义和使用ref属性。

摘要由CSDN通过智能技术生成

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>

父组件

<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>