vue - 动态绑定ref(使用变量)以及获取方式,解决v-for循环嵌套自定义子组件时无法this.$refs.xx找到动态组件的情况(详细示例教程)适合 vue.js nuxt.js uniapp

这篇具有很好参考价值的文章主要介绍了vue - 动态绑定ref(使用变量)以及获取方式,解决v-for循环嵌套自定义子组件时无法this.$refs.xx找到动态组件的情况(详细示例教程)适合 vue.js nuxt.js uniapp。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

介绍

正常情况,我们需要在vue中获得某个dom或者组件,我们会通过绑定 ref 然后通过绑定后的名字来获取这个dom 。

但是,如果我们在v-for中绑定ref的话,那么这个ref就会存在多个,比如我们点击事件让对应的显示/隐藏的话,我们很难找到这个对应的元素。

那么,这时我们需要动态绑定不一样的ref(比如 Arr1、Arr2、Arr3这种),那么我们如何实现呢?

实现代码

注释详细,一眼就能看出如何解决这个问题。

以下示例无依赖,可直接在 vue 环境中运行查看。

页面:文章来源地址https://www.toymoban.com/news/detail-636804.html

<template>
  

到了这里,关于vue - 动态绑定ref(使用变量)以及获取方式,解决v-for循环嵌套自定义子组件时无法this.$refs.xx找到动态组件的情况(详细示例教程)适合 vue.js nuxt.js uniapp的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3 使用ref 获取 dom 元素的高度

    代码实现: 输出结果:  

    2024年02月16日
    浏览(41)
  • vue3 - vue3中使用ref来获取dom节点

    vue3和vue2获取元素的不同:vue2是通过 this.$refs api获取dom节点的 ; vue3是 直接使用同名的 ref 响应式数据来获取的; 1,常规使用 注意: 节点上的 ref=“input” 需要和 const input = ref(null)相对应 才能获取到此dom节点 2,v-for中的ref获取 有时我们需要 获取循环中的dom节点 并根据状态

    2024年02月16日
    浏览(50)
  • vue3使用ref获取dom结果为‘null’

    在vue2中,我们使用ref获取dom元素时是这样子的: 在vue3中,我们使用ref获取dom元素时是这样子的: 下面来说说vue3中获取dom为空的原因: setup的return中应该抛出ref封装的字段,否则ref的值只是定义了并不能响应式使用,事实上,所有ref或者reactive定义的值都应在return中抛出。

    2024年02月12日
    浏览(71)
  • vue项目动态获取窗口以及元素宽高

    场景1:页面刚进来时,获取窗口的默认宽高以及某个元素(div)的默认宽高 场景2:当页面缩放时,自动获取窗口的宽高以及某个元素(div)的宽高  效果如下:  因为不喜欢看别人写那么多废话,只想直接看代码,因为我有很完善的注释

    2024年02月11日
    浏览(42)
  • docker使用环境变量的方式动态配置nginx

    使用docker部署nginx时,由于nginx配置文件里面的一些ip和端口是随着环境变化而改变的,即在 不同的环境 里,使用的 ip和端口都不一样 。这就导致每次部署到新环境时,都要重新编写配置文件,再制作成新的镜像,比较繁琐。 所以我想要制作一个通用的镜像,将ip和端口设置

    2024年02月09日
    浏览(38)
  • vue中使用this.$refs获取不到子组件的方法,属性方法都为undefined的解决方法

    因为注册了多个ref,获取是不能单单知识refs.xxx,需要使用数组和索引来获取具体一个组件refs[index].xxx 额……就像这样😐 好这么一写,导致前两个组件都无法正常使用…… 页面也会有这个报错: 组件名 - did you register the component correctly? For recursive components, make sure to provide

    2024年02月13日
    浏览(51)
  • vue全家桶进阶之路31:Vue3 数据和方法的双向绑定ref、reactive、toRefs

    ref 在 Vue 3 中,你可以使用 setup 函数来定义组件的数据和方法。在 setup 函数中,你可以使用 ref 、 reactive 和 computed 等 Vue 3 的响应式 API 来定义数据,并返回一个包含你需要公开的数据和方法的对象。下面是一个例子: 在这个例子中,我们使用 ref 函数来定义了一个名为 mes

    2023年04月19日
    浏览(54)
  • Vue3 ref响应式变量详解

    在Vue 3中,ref是一个函数,用于创建响应式数据。它接受一个初始值作为参数,并返回一个可变的响应式对象。 使用ref创建的响应式对象可以直接在模板中使用,并且当其值发生变化时,相关的组件会自动重新渲染。与Vue 2中的data选项不同,Vue 3推荐使用ref来创建响应式数据

    2024年02月09日
    浏览(39)
  • vue-treeselect的基本使用以及如何更改id以及label的绑定值

    一、最主要的几点就是 1、绑值:value=“form.astdeptId”,主要绑的就是id,通过id找到对应的label回显 2、options是数据源,正常调接口获取就行了 3、append-to-body=\\\"true\\\"这个最好加上,可能会遇到下拉的弹窗打不开或者只有一点点高的情况 4、( ******) normalizer属性 就是把我们自己

    2024年02月02日
    浏览(44)
  • Vue3中动态绑定:disabled element-plus使用方法

    @change=\\\"whetherFlag($event)\\\"  根据value值判断是否禁用 :disabled=\\\"isShow\\\" 初始值为禁用状态 const isShow = refboolean(true);  根据value的值判断是否禁用  

    2024年01月25日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包