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

這篇文章主要講解了“Vue3中怎么使用ref標(biāo)簽對組件進(jìn)行操作”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“Vue3中怎么使用ref標(biāo)簽對組件進(jìn)行操作”吧！

在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>

感謝各位的閱讀，以上就是“Vue3中怎么使用ref標(biāo)簽對組件進(jìn)行操作”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對Vue3中怎么使用ref標(biāo)簽對組件進(jìn)行操作這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！