Vue3--ref 和 $refs 的使用

ref 介绍

  • ref 被用来给元素或子组件注册引用信息, 引用信息将会注册在父组件的 $refs 对象上,如果是在普通的DOM元素上使用,引用指向的就是 DOM 元素,如果是在子组件上,引用就指向组件的实例。
  • $refs是一个对象,持有已注册过 ref的所有的子组件。

ref 有三种用法:

  • ref 加在普通的元素上,用this.$refs.name获取到的是dom元素
  • ref 加在子组件上,用this.$refs.name获取到的是组件实例,可以使用组件的所有方法
  • 利用 v-for 和 ref 获取一组数组或者dom 节点

 ref 需要在dom渲染完成后才会有,在使用的时候确保dom已经渲染完成。比如在生命周期mounted(){}钩子中调用,或者在 this.$nextTick(()=>{})中调用。

子组件

复制代码
<template>
  <div>
      <div>按钮</div>
  </div>
</template>

<script>
export default {

  data() {
    return {
        datalist:[1,2,3,4],
        name:"邹邹"
    };
  },
  methods: {
      save(){
          alert('save')
          console.log('save')
      },
      test(){
          alert('test')
      }
   
  },
};
</script>
复制代码

父组件

复制代码
<template>
    <div>
     
       <test ref='hello'/>   <!-- 给子组件绑定了一个 ref='hello' 的属性,就可以通过 this.$refs.hello 获取子组件里的数据了 -->
       <button @click="hangleclick()">提交</button>
    </div>
</template>

<script>
import Test from './test1'  
    export default {
      components:{ Test }, // 声明子组件
        data(){
            return{
                num: 1
            }
        },
        methods:{
          hangleclick(){
            console.log("datalist",this.$refs.hello.datalist)  // 调用子组件的 datalist 数据
            console.log("name",this.$refs.hello.name)  // 调用子组件的 name 数据
            this.$refs.hello.save()  // 调用子组件的 save 函数
            this.$refs.hello.test()  // 调用子组件的 test 函数

          }

        }
    }
</script>
复制代码

点击页面上的按钮,查看控制台输出,可以看到在父组件里调用了子组件的数据和方法

setup 中使用 ref 和 $refs

上面中是在 options 中使用了 ref 和 $ refs ,但在 setup 中,是没有 this 的,那如何获取子组件的数据呢?可以在元素上绑定 ref 属性

子组件

复制代码
<template>
  <div>
    <div>按钮</div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue"; // 导入

const name = ref("邹邹");
const datalist = reactive([1, 2, 3, 4]);

const save = () => {
  alert("save");
  console.log("save函数执行了");
};

const test = () => {
  alert("test函数执行了");
};

// 父组件使用的话需要导出
defineExpose({
  name,
  datalist,
  save,
  test
});
</script>
复制代码

父组件

复制代码
<template>
  <div>
    <child ref="childFormRef" />
    <!-- 给子组件绑定了一个 ref='childFormRef'  -->
    <button @click="handleclick()">提交</button>
  </div>
</template>

<script setup lang="ts">
import Child from "./child.vue";
import { ref } from "vue"; // 导入

const childFormRef: any = ref<InstanceType<typeof Child>>(); // 实例化

const num = ref(1);

const handleclick = () => {
  console.log("name", childFormRef.value.name);
  console.log("datalist:", childFormRef.value.datalist); // 调用子组件的 datalist 数据
  childFormRef.value.save(); // 调用子组件的 save 函数
  childFormRef.value.test(); // 调用子组件的 test 函数
};
</script>
复制代码

这样就实现了在 setup 中使用 ref 和 $refs 了,效果和在 options 里的一样

 

posted @   邹邹很busy。  阅读(20437)  评论(0编辑  收藏  举报
编辑推荐:
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 我与微信审核的“相爱相杀”看个人小程序副业
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~
历史上的今天:
2020-12-02 python--封装
点击右上角即可分享
微信分享提示

目录导航