Vue3中使用ref標(biāo)簽對組件進(jìn)行操作方法

更新時(shí)間：2023年04月17日 14:50:55 作者：knva

這篇文章主要介紹了Vue3中使用ref標(biāo)簽對組件進(jìn)行操作方法,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

Vue3使用ref標(biāo)簽

在Vue2中一般用 this.$ref.xxxx 進(jìn)行獲取組件對象
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組件對象

先創(chuàng)建

const uploadRef =  ref()

使用的話需要xxx.value.xxx
例如：

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

補(bǔ)充：Vue3 中 ref 標(biāo)記組件使用

在 Vue3 中我們還可以使用 ref 標(biāo)記組件來進(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)簽，對組件進(jìn)行操作的文章就介紹到這了,更多相關(guān)Vue3使用ref標(biāo)簽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

梳理一下vue中的生命周期
看過很多人講vue的生命周期，但總是被繞的云里霧里，尤其是自學(xué)的同學(xué)，可能js的基礎(chǔ)也不是太牢固，聽起來更是吃力，那我就已個(gè)人之淺見，以大白話的方式給大家梳理一下，如有不準(zhǔn)確的地方，歡迎指正！
2020-12-12
VueJS事件處理器v-on的使用方法
本篇文章主要介紹了VueJS事件處理器v-on的使用方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-09-09
Vue.directive 自定義指令的問題小結(jié)
這篇文章主要介紹了Vue.directive 自定義指令的問題小結(jié),需要的朋友可以參考下
2018-03-03
vue如何導(dǎo)出json數(shù)據(jù)為excel表格并保存到本地
這篇文章主要介紹了vue如何導(dǎo)出json數(shù)據(jù)為excel表格并保存到本地問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-07-07
基于Vue+element-ui 的Table二次封裝的實(shí)現(xiàn)
這篇文章主要介紹了基于Vue+element-ui 的Table二次封裝的實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-07-07
Vue路由router詳解
這篇文章主要介紹了vue router 配置路由的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2021-10-10
vue3 + ElementPlus 封裝列表表格組件包含分頁
文章介紹了如何在Vue3和ElementPlus中封裝一個(gè)包含分頁功能的通用列表表格組件,組件通過props接收表格數(shù)據(jù)、列配置、總條數(shù)、加載狀態(tài)和分頁配置,并通過events處理分頁和刷新事件,此外,還提供了自定義列內(nèi)容和操作按鈕的功能,感興趣的朋友跟隨小編一起看看吧
2025-02-02
Vue實(shí)現(xiàn)dom元素拖拽并限制移動(dòng)范圍的操作代碼
這篇文章主要介紹了Vue實(shí)現(xiàn)dom元素拖拽并限制移動(dòng)范圍的操作代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-12-12
如何使用vue3打造一個(gè)物料庫
這篇文章主要介紹了如何使用vue3打造一個(gè)物料庫，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下
2021-05-05
Vue全局共享數(shù)據(jù)之globalData,vuex,本地存儲(chǔ)的使用
這篇文章主要介紹了Vue全局共享數(shù)據(jù)之globalData,vuex,本地存儲(chǔ)的使用方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10