Vue3中使用ref標(biāo)簽對(duì)組件進(jìn)行操作方法
更新時(shí)間：2023年04月17日 14:50:55 作者：knva
這篇文章主要介紹了Vue3中使用ref標(biāo)簽對(duì)組件進(jìn)行操作方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
Vue3使用ref標(biāo)簽
在Vue2中 一般用 this.$ref.xxxx 進(jìn)行獲取組件對(duì)象
Vue3中就不使用這個(gè)方法了
例如:
<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">導(dǎo)入</el-button>
</el-upload>想要獲取el-upload組件對(duì)象
先創(chuàng)建
const uploadRef = ref()
使用的話需要xxx.value.xxx
例如：
// 清除上傳列表 uploadRef.value.clearFiles()
補(bǔ)充：Vue3 中 ref 標(biāo)記組件使用
在 Vue3 中我們還可以使用 ref 標(biāo)記組件來(lái)進(jìn)行獲取父子組件獲取屬性和方法的操作。
父組件
<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>到此這篇關(guān)于Vue3中 如何使用ref標(biāo)簽，對(duì)組件進(jìn)行操作的文章就介紹到這了,更多相關(guān)Vue3使用ref標(biāo)簽內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
看過(guò)很多人講vue的生命周期，但總是被繞的云里霧里，尤其是自學(xué)的同學(xué)，可能js的基礎(chǔ)也不是太牢固，聽(tīng)起來(lái)更是吃力，那我就已個(gè)人之淺見(jiàn)，以大白話的方式給大家梳理一下，如有不準(zhǔn)確的地方，歡迎指正！2020-12-12
本篇文章主要介紹了VueJS事件處理器v-on的使用方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
Vue.directive 自定義指令的問(wèn)題小結(jié)
這篇文章主要介紹了Vue.directive 自定義指令的問(wèn)題小結(jié),需要的朋友可以參考下2018-03-03
vue如何導(dǎo)出json數(shù)據(jù)為excel表格并保存到本地
這篇文章主要介紹了vue如何導(dǎo)出json數(shù)據(jù)為excel表格并保存到本地問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
基于Vue+element-ui 的Table二次封裝的實(shí)現(xiàn)
這篇文章主要介紹了基于Vue+element-ui 的Table二次封裝的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
這篇文章主要介紹了vue router 配置路由的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2021-10-10
vue3 + ElementPlus 封裝列表表格組件包含分頁(yè)
文章介紹了如何在Vue3和ElementPlus中封裝一個(gè)包含分頁(yè)功能的通用列表表格組件,組件通過(guò)props接收表格數(shù)據(jù)、列配置、總條數(shù)、加載狀態(tài)和分頁(yè)配置,并通過(guò)events處理分頁(yè)和刷新事件,此外,還提供了自定義列內(nèi)容和操作按鈕的功能,感興趣的朋友跟隨小編一起看看吧2025-02-02
Vue實(shí)現(xiàn)dom元素拖拽并限制移動(dòng)范圍的操作代碼
這篇文章主要介紹了Vue實(shí)現(xiàn)dom元素拖拽并限制移動(dòng)范圍的操作代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了如何使用vue3打造一個(gè)物料庫(kù)，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-05-05
Vue全局共享數(shù)據(jù)之globalData,vuex,本地存儲(chǔ)的使用
這篇文章主要介紹了Vue全局共享數(shù)據(jù)之globalData,vuex,本地存儲(chǔ)的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10