快捷導(dǎo)航

vue3基于script?setup語(yǔ)法$refs的使用

更新時(shí)間：2022年01月25日 09:13:40 作者：快樂(lè)編程

這篇文章主要介紹了vue3基于script?setup語(yǔ)法$refs的使用，<BR>?在用vue3開(kāi)發(fā)項(xiàng)目的時(shí)候，需要調(diào)用子組件的方法，于是想著用$refs來(lái)實(shí)現(xiàn)，但是我是使用script?setup語(yǔ)法糖，原先vue2的語(yǔ)法已經(jīng)不適用了。下面我們一起進(jìn)入文章看詳細(xì)內(nèi)容吧</P><P>

一、vue2語(yǔ)法

vue2語(yǔ)法在組件上設(shè)置ref屬性后，在代碼里可以通過(guò) this.$refs.ref值訪問(wèn)到對(duì)應(yīng)的子組件。

一個(gè)設(shè)置ref值的組件：

<base-input ref="usernameInput"></base-input>

在js代碼中可以通過(guò)如下代碼訪問(wèn)到這個(gè)組件：

this.$refs.usernameInput

可以調(diào)用里面的方法：

// 假設(shè) base-input 組件內(nèi)有方法foo
 
this.$refs.usernameInput.foo();

詳細(xì)使用可以參考底部列出的參考文章。

二、vue3使用

網(wǎng)上找了一些文章比較零散，而且試了下都不能用，但是通過(guò)這些文章了解到了一些關(guān)鍵信息，最后整理出如下幾步：

1. 組件設(shè)置ref值

這個(gè)和vue2的類(lèi)似，父組件調(diào)用子組件的時(shí)候設(shè)置ref值。

<ChildVue ref="childRef" />

2. 組件實(shí)例獲取

設(shè)置完成后，vue3可以通過(guò)ref方法獲取。

const childRef = ref();

這邊變量的名字需要和上面ref的一致。如何直接打印childRef，這個(gè)時(shí)候會(huì)是：

undefined

因?yàn)轫?yè)面組件還沒(méi)有掛載完成，所以需要在掛載完成之后才能正常使用。

onMounted(() => {
    console.log(childRef.value); // Proxy {…}
});

3. 子組件內(nèi)設(shè)置對(duì)外公開(kāi)的變量

上面第2步獲取到子組件實(shí)例后，無(wú)法使用子組件內(nèi)的方法，因?yàn)槭褂?code> script setup 的組件默認(rèn)是關(guān)閉的，如果需要公開(kāi)，需要使用 defineExpose 編譯器宏。

// 子組件代碼
const foo = () => {
  console.log("foo");
}
defineExpose({
  foo
});

父組件內(nèi)調(diào)用：

// 調(diào)用子組件方法
childRef.value.foo(); // foo

這樣就可以調(diào)用到子組件的方法了。

查看childRef.value，也可以看到其中公開(kāi)的foo方法：

vue3父組件調(diào)用子組件方法

完整參考代碼：

父組件：

<template>
    <ChildVue ref="childRef" />
</template>
 
<script setup lang="ts">
import { ref } from '@vue/reactivity';
import { onMounted } from '@vue/runtime-core';
import ChildVue from './Child.vue';
 
const childRef = ref();
console.log(childRef.value); // undefined
 
onMounted(() => {
    console.log(childRef.value); // Proxy {…}
    // 調(diào)用子組件方法
    childRef.value.foo(); // foo
});
</script>
 
<style>
</style>

子組件：

<template>child demo</template>
 
<script setup lang="ts">
const foo = () => {
  console.log("foo");
}
defineExpose({
  foo
});
</script>
 
<style>
</style>

到此這篇關(guān)于vue3基于script setup語(yǔ)法$refs的使用的文章就介紹到這了,更多相關(guān)vue3 $refs的使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: