Vue3中使用ref标签对组件进行操作方法
短信预约 -IT技能 免费直播动态提醒
Vue3使用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()补充：Vue3 中 ref 标记组件使用
在 Vue3 中我们还可以使用 ref 标记组件来进行获取父子组件获取属性和方法的操作。
父组件
<template>
<hello-world ref='son'></hello-world>
<button @click='getSon()'>获取</button>
</template>
<script setup>
// 首先还是先引入子组件
import HelloWorld from './components/HelloWorld.vue'
// 然后引入 ref ,并声明 son
import {ref} from 'vue'
const son = ref()
const getSon = () => {
console.log(son.value.title)
son.value.sonMethod()
}
</script>子组件
<template>
<div> {{ title }} </div>
</template>
<script setup>
import {ref} from 'vue'
const title = ref('我是子组件的title')
const sonMethod = () => {
console.log('我是子组件的方法')
}
// 最要的一步，这里我们需要把父组件需要的属性和方法暴露出去，这样父组件才能获取的到
defineExpose({sonMethod, title})
</script>到此这篇关于Vue3中 如何使用ref标签，对组件进行操作的文章就介绍到这了,更多相关Vue3使用ref标签内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
