vue3基于script?setup語法$refs的使用

更新時間：2022年01月25日 09:13:40 作者：快樂編程

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

一、vue2語法

vue2語法在組件上設置ref屬性后，在代碼里可以通過 this.$refs.ref值訪問到對應的子組件。

一個設置ref值的組件：

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

在js代碼中可以通過如下代碼訪問到這個組件：

this.$refs.usernameInput

可以調用里面的方法：

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

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

二、vue3使用

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

1. 組件設置ref值

這個和vue2的類似，父組件調用子組件的時候設置ref值。

<ChildVue ref="childRef" />

2. 組件實例獲取

設置完成后，vue3可以通過ref方法獲取。

const childRef = ref();

這邊變量的名字需要和上面ref的一致。如何直接打印childRef，這個時候會是：

undefined

因為頁面組件還沒有掛載完成，所以需要在掛載完成之后才能正常使用。

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

3. 子組件內設置對外公開的變量

上面第2步獲取到子組件實例后，無法使用子組件內的方法，因為使用 script setup 的組件默認是關閉的，如果需要公開，需要使用 defineExpose 編譯器宏。

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

父組件內調用：

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

這樣就可以調用到子組件的方法了。

查看childRef.value，也可以看到其中公開的foo方法：

vue3父組件調用子組件方法

完整參考代碼：

父組件：

<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 {…}
    // 調用子組件方法
    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>

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

您可能感興趣的文章: