Vue3 ベースのスクリプト設定構文 $refs の使用

1. Vue2 構文

vue2 構文でコンポーネントに ref 属性を設定すると、コード内の this.$refs.ref 値を通じて対応するサブコンポーネントにアクセスできるようになります。

ref 値を設定するコンポーネント:

<base-input ref="ユーザー名入力"></base-input>

js コードでは、次のコードを通じてこのコンポーネントにアクセスできます。

this.$refs.usernameInput

次のメソッドを内部で呼び出すことができます:

// ベース入力コンポーネントにメソッド foo があると仮定します
 
this.$refs.usernameInput.foo();

詳しい使い方については、下部に記載している参考記事をご覧ください。

2. Vue3の使用

インターネットでいくつかの記事を見つけましたが、試してみたところどれもうまくいきませんでした。しかし、これらの記事からいくつかの重要な情報を得て、最終的に次の手順を整理しました。

1. コンポーネントのref値を設定する

これは vue2 に似ており、親コンポーネントが子コンポーネントを呼び出すときに ref 値を設定します。

<ChildVue ref="childRef" />

2. コンポーネントインスタンスの取得

設定が完了すると、ref メソッドを通じて vue3 を取得できるようになります。

定数childRef = ref();

ここでの変数名は上記のrefと一致している必要があります。 childRefを直接印刷する方法は、次のようになります。

未定義

ページコンポーネントはまだマウントされていないため、正常に使用できるようにするにはマウントする必要があります。

マウント時(() => {
    console.log(childRef.value); // プロキシ {…}
});

3. サブコンポーネントにパブリック変数を設定する

上記の手順 2 でサブコンポーネントインスタンスを取得した後は、 script setupを使用するコンポーネントはデフォルトで閉じられているため、サブコンポーネント内のメソッドは使用できません。これをパブリックにする必要がある場合は、 defineExposeコンパイラマクロを使用する必要があります。

// サブコンポーネントコード const foo = () => {
  コンソールにログ出力します。
}
定義公開({
  フー
});

親コンポーネントを呼び出します:

// 子コンポーネントメソッドを呼び出す childRef.value.foo(); // foo

このようにして、サブコンポーネントのメソッドを呼び出すことができます。

childRef.value を見ると、public foo メソッドが確認できます。

Vue3 親コンポーネントが子コンポーネントメソッドを呼び出す

完全な参照コード:

親コンポーネント:

<テンプレート>
    <ChildVue ref="childRef" />
</テンプレート>
 
<スクリプト設定 lang="ts">
'@vue/reactivity' から { ref } をインポートします。
'@vue/runtime-core' から onMounted をインポートします。
'./Child.vue' から ChildVue をインポートします。
 
定数childRef = ref();
console.log(childRef.value); // 未定義
 
マウント時(() => {
    console.log(childRef.value); // プロキシ {…}
    // 子コンポーネントメソッドを呼び出す childRef.value.foo(); // foo
});
</スクリプト>
 
<スタイル>
</スタイル>

サブコンポーネント:

<template>子デモ</template>
 
<スクリプト設定 lang="ts">
定数foo = () => {
  コンソールにログ出力します。
}
定義公開({
  フー
});
</スクリプト>
 
<スタイル>
</スタイル>

Vue3 のスクリプト設定構文に基づく $refs の使用に関するこの記事はこれで終わりです。Vue3 での $refs の使用に関する詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: