vue3 中通过$refs 获取子组件数据

vue2 中获取子组件中的数据方法，可以使用 this.$refs ，但此方式在vue3中不适用了。

问题： 点击删除行的同时修改表格中数据选中状态，需要通过 ref 操作表格中的数据。具体代码如下：

<template><el-tableref="multipleTableRef":data="tableData"style="width: 100%":show-header="false"@selection-change="handleSelectionChange"><el-table-column type="selection" width="55" /><el-table-column property="address" label="Address" show-overflow-tooltip /></el-table><ul><li v-for="(item, index) in multipleSelection" :key="item.id">{{item.address}}<i @click="del(index)">删除</i></li></ul>
</template><script setup>
import { ref } from 'vue'const multipleTableRef = ref()
const multipleSelection = ref([])const handleSelectionChange = (val) => {multipleSelection.value = val
}const del = (index) => {const a = multipleSelection.value[index]multipleSelection.value.splice(index, 1)// 通过 ref 操作table中的数据multipleTableRef.value.toggleRowSelection(a, false)
}const tableData = [{id: 1,address: '数据1'},{id: 2,address: '数据2'},{id: 3,address: '数据3'},{id: 4,address: '数据4'},{id: 5,address: '数据5'}
]
</script>

vue3 中通过$refs 获取子组件数据相关推荐

vue --- 获取子组件数据的一个应急方案$refs
使用$refs需要注意以下2点: 1.html方法使用子组件时,需使用ref = "xxx" 声明. 2.在父组件中使用,this.refs.xxx.msg 获取数据 <!D ...
vue 子级拿值_vue 父组件通过$refs获取子组件的值和方法详解
前言在vue项目中组件之间的通讯是很常见的问题,同时也是很重要的问题,我们大致可以将其分为三种情况: 父传子:在父组件中绑定值,在子组件中用props接收子传父:在父组件中监听一个事件,在子组件中 ...
vue组件通信之父组件主动获取子组件数据和方法
ref 可以用来获取到dom节点,如果在组件中应用,也可以用来获取子组件的数据和方法. 比如,我定义了一个home组件,一个head组件,home组件中引用head组件. 此时,home组件是head ...
vue3没了$children，如何获取子组件？？？
vue3没了$children,如何获取子组件??? $children 移除概览 $children 实例 property 已从 Vue 3.0 中移除,不再支持. 2.x 语法在 2.x 中 ...
vue 父循环怎么拿子循环中的值_Vue 父组件循环使用refs调用子组件方法出现undefined的问题...
Vue 父组件循环使用refs调用子组件方法出现undefined的问题 1. 背景最近前端项目遇到一个问题,我在父组件中使用了两个相同的子组件child,分别设置ref为add和update.其中 ...
vue/uniapp父组件获取子组件内的数据或方法
1.父组件主动获取子组件中的数据和方法在父组件里面通过: ``` this.$refs.childMethod.属性 this.$refs.childMethod.方法 ``` 在父组件中:(调用子 ...
vue3.0 父组件调用子组件方法及获取子组件的值
vue3.0 父组件调用子组件方法及获取子组件的值通过对比2.0的获取及调用方式这里我们也可以借鉴2.0中的this.$refs去获取3.0和2.0的refs获取的方式有点大同小异,但是思路还是一样 ...
jquery查找父窗体id_Vue父组件获取子组件中的变量
全世界只有不到3 % 的人关注了我你真是个特别的人在vue项目日常开发中,难免要把功能性组件抽离出来,这样结构就会出现父子组件,兄弟组件等,但是这样就会涉及到不同组件需要互相使用其中的某个值的问题 ...
Vue3中的父子、子父组件通信
Vue3中的父子.子父组件通信方式总结李俊才的CSDN博客 CSDN用户名:jcLee95 邮箱:291148484@163.com 1. 父组件 => 子组件 | 使用props 父组件(分 ...

vue3 中通过$refs 获取子组件数据

vue3 中通过$refs 获取子组件数据相关推荐

最新文章

热门文章