首页 > 其他分享 >Vue3中 如何使用ref标签,对组件进行操作

Vue3中 如何使用ref标签,对组件进行操作

时间:2023-04-17 14:34:28浏览次数:45  
标签:xxx value Vue3 组件 uploadRef ref

在Vue2中 一般用 this.$ref.xxxx 进行获取组件对象
Vue3中就不使用这个方法了
例如:

     <el-upload class="upload-demo" action="" :http-request="handleUpload" 
                    :on-change="handleChange"
          :before-upload="handleBeforeUpload" :show-file-list="false" :auto-upload="false" :limit="1" ref="uploadRef">
          <el-button type="primary" icon="upload" slot="trigger">导入</el-button>
        </el-upload>

想要获取el-upload组件对象

先创建

const uploadRef =  ref()

使用的话需要xxx.value.xxx
例如:

  // 清除上传列表
  uploadRef.value.clearFiles()

标签:xxx,value,Vue3,组件,uploadRef,ref
From: https://www.cnblogs.com/knva/p/17325749.html

相关文章

  • 直播网站程序源码,给组件按钮、文本编辑框等设置圆形边框、颜色
    直播网站程序源码,给组件按钮、文本编辑框等设置圆形边框、颜色代码如下:1.添加drawable资源文件 <?xmlversion="1.0"encoding="utf-8"?><shape  xmlns:android="http://schemas.android.com/apk/res/android"  android:shape="rectangle">  <!--......
  • vue3中使用ref语法糖
    自从引入组合式API的概念以来,一个主要的未解决的问题就是ref和响应式对象到底用哪个。响应式对象存在解构丢失响应性的问题,而ref需要到处使用.value则感觉很繁琐,并且在没有类型系统的帮助时很容易漏掉.value写法优化以上是官方原话。大概就是新的语法糖可以让我们......
  • Vue3 vue-cli创建工程的工程结构分析
    视频不能用vue2的写法了componentsHelloWorld.vue<template><divclass="hello"><h1>{{msg}}</h1><p>Foraguideandrecipesonhowtoconfigure/customizethisproject,<br>checkoutthe......
  • angular开发从入门到入土第二节(组件通信)
    一.input和output1.子组件通过@Input装饰器获取到父组件传递的值//子组件html模板<p>child</p><div>{{showText}}</div>子组件类import{ChangeDetectionStrategy,Component,Input}from'@angular/core';@Component({selector:'app-my-co......
  • 【230416-2】某校准备组件一支18人的球队,名额分配到十个班,每班至少选一人。问分配方案
    ......
  • 第五节:setState详解、render函数优化、数据不可变、ref获取DOM和组件
    一.        二.        三.         !作       者:Yaopengfei(姚鹏飞)博客地址:http://www.cnblogs.com/yaopengfei/声     明1:如有错误,欢迎讨论,请勿谩骂^_^。声     明2:原创博客请在转载......
  • 前端学习笔记——Vue3组件间数值传递
    依据个人的学习需求,对Vue官网中组件部分内容的搬运和总结,可用于参看,想详细了解Vue3这部分特性的可以直接参考官网内容:https://cn.vuejs.orgprops是一种特别的attributes,我们可以在组件上生命注册。比如:如果我们要传递给博客文章组建一个标题的话,我们则必须在该组件的props列表......
  • vue3中使用axios
    1、问题:在vue2中axios通常是经过封装的后挂载使用的,来处理token及报错处理,比如//main.jsimportajaxfrom'@/axios.js'Vue.prototype.ajax=ajax在项目中使用也很方便this.ajax就行了,那vue3中是如何简单、便捷的封装并使用呢2、思路:vue3中使用axios并不难,封装,然后......
  • vue3使用tinymce
    第一种方法:通过使用key云端调用安装@tinymce/tinymce-vuenpmi@tinymce/tinymce-vue去官网注册一个账号获取key,然后去https://www.tiny.cloud/get-tiny/language-packages/下载语言包,放在目录下的public里在组件中使用,工具栏可以是字符串或者数组,一行字符串可以看做......
  • tinymce封装成vue3组件
    封装成组件<scriptsetup>importEditorfrom'@tinymce/tinymce-vue'//引入tinymce开启本地模式import'tinymce/tinymce'//引入图标和主题等import'tinymce/themes/silver/theme'import'tinymce/icons/default/icons'import'tin......