vue3.0中使用ref来调用子组件的方法

最新推荐文章于 2025-07-17 14:45:48 发布

原创

最新推荐文章于 2025-07-17 14:45:48 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

本文介绍了Vue3.0中ref的使用方法，对比了与Vue2.0的区别，详细阐述如何在父组件中通过ref获取并操作子组件的数据和方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：

vue3.0中ref的使用和vue2.0中的ref相比较也有很大的改变，这里总结下他的具体使用方法。

vue2.0

父组件：

template

 <Table ref="eleTable" @handle="handleFun"></Table>

methods:

this.$refs.eleTable.子组件的方法名+()

this.$refs.eleTable.子组件的属性名

vue3.0

父组件：

template

 <Table ref="eleTable" @handle="handleFun"></Table>

script中：

import {  ref  } from 'vue'

setup() { 
   //ref方法
    const eleTable = ref()  //eleTable是页面ref后面对应的名字
    const clickSon = () => {
      eleTable.value.changeShowText() //调用子组件的方法
      let arr = eleTable.value.tableData //获取子组件 setup 里面定义的变量
    }
}