Composition API はロジック再利用手順を実装します。
たとえば、現在のマウスの位置を取得するメソッドを定義します。 1 つ目は、ref で定義された useMousePosition を直接使用することです。このようにして、輸出と輸入の両方を自由に構造化することができる。 // マウスの位置を使用する 'vue' から { ref, onMounted, onUnmounted } をインポートします。 // 1. 関数を定義し、ロジックを抽出し、useXXX という名前を付けます 関数useMousePosition() { // ref を使用して定義します const x = ref(0) 定数y = ref(0) 関数 update(e) { console.log(x.値、y.値); x.値 = e.ページX y.値 = e.pageY } マウント時(() => { console.log('マウス移動イベントのリッスンを開始します'); window.addEventListener('mousemove', 更新) }) マウント解除時(() => { console.log('マウススクロールイベントの監視を削除します'); window.removeEventListener('mousemove', 更新) }) 戻る { ×、 ええ } } // この関数をエクスポートする export default useMousePosition <!-- このメソッドはどのコンポーネントでも呼び出すことができます --> <テンプレート> <p>マウスの位置: {{x}}, {{y}}</p> </テンプレート> <スクリプト> './useMousePosition' から useMousePosition をインポートします。 エクスポートデフォルト{ 名前: 'MousePosition', 設定() { // useMousePosition は ref を使用して変数を定義し、分解することができます。const { x, y } = useMousePosition() コンソールログ(x, y) 戻る { x, y } } } </スクリプト> 2 番目の方法は、reactive を使用してマウス座標オブジェクトを定義することです。このエクスポート メソッドは、コンポーネントにインポートするときに構造化解除できません。 'vue' から { onMounted、onUnmounted、reactive } をインポートします。 エクスポート関数useMousePosition2() { // reactive を使用して定義します const mouse = reactive({ x: 0, 年: 0 }) 関数 update(e) { マウス.x = e.pageX マウス.y = e.pageY } マウント時(() => { console.log('マウス移動イベントのリッスンを開始します'); window.addEventListener('mousemove', 更新) }) マウント解除時(() => { console.log('マウススクロールイベントの監視を削除します'); window.removeEventListener('mousemove', 更新) }) 戻る { ねずみ } } <テンプレート> <!-- オブジェクト メソッドを使用して情報を表示します --> <p>マウスの位置2: {{mouse.x}}, {{mouse.y}}</p> </テンプレート> <スクリプト> './useMousePosition' から { useMousePosition2 } をインポートします。 エクスポートデフォルト{ 名前: 'MousePosition', 設定() { // useMousePosition2 はリアクティブを使用して定義されているため、分解は不可能です const { mouse } = useMousePosition2() 戻る { ねずみ } } } </スクリプト> 3番目の方法はtoRefsを使うことですこのメソッドを使用すると、リアクティブ オブジェクトを ref オブジェクトに分解できます。 エクスポート関数useMousePosition3() { // reactive を使用して定義します const mouse = reactive({ x: 0, 年: 0 }) 関数 update(e) { マウス.x = e.pageX マウス.y = e.pageY } マウント時(() => { console.log('マウス移動イベントのリッスンを開始します'); window.addEventListener('mousemove', 更新) }) マウント解除時(() => { console.log('マウススクロールイベントの監視を削除します'); window.removeEventListener('mousemove', 更新) }) // ここで、toRefs を使用して ref オブジェクトに分解します。return toRefs(mouse) } <テンプレート> <p>マウスの位置: {{x}}, {{y}}</p> </テンプレート> <スクリプト> './useMousePosition' から {useMousePosition3 } をインポートします。 エクスポートデフォルト{ 名前: 'MousePosition', 設定() { // リアクティブを使用してマウス座標オブジェクトを定義し、toRefs を介してそれを参照オブジェクトに分解します。const { x, y } = useMousePosition() コンソールログ(x, y) 戻る { x, y } } } </スクリプト> 3 つの方法はすべて実装できますが、通常使用する場合は ref オブジェクトを返すため、1 番目と 3 番目の方法を使用し、2 番目の方法は使用しないようにすることをお勧めします。 Vue3 コンポジション API でロジック再利用を実現する方法についての記事はこれで終わりです。Vue3 コンポジション API ロジック再利用の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Win10にmysql8.0.15 winx64をインストールしてサーバーに接続する際に問題が発生しました
>>: Centos7 ベースの mysql5.7 のクイックインストールのチュートリアル分析
簡単な説明エディターはデータベースのエンコードが間違っているために問題に遭遇することが多く、これは頭...
序文Linux で最も広く使用されているデータベースは MySQL です。この記事では、Linux ...
MySQL インストール手順 MySQL は、スウェーデンの MySQL AB によって開発された...
序文Linux のファイルまたはディレクトリの権限については、共通の rwx 権限を知っておく必要が...
この記事では、docker pull がリセットされる問題を解決する方法を紹介し、皆さんと共有します...
序文MySQL データベースの文字列型は、CHAR、VARCHAR、BINARY、BLOB、TEXT...
序文: Jenkins のマスター スレーブ分散アーキテクチャは、主に、Jenkins に単一ポイン...
Flash での HTML と CSS の適用:同僚の Den が Flash で HTML と C...
この記事の例では、参考までに簡単な計算機を実装するためのjsの具体的なコードを共有しています。具体的...
vue は、ページ上の div ボックスのドラッグ アンド ドロップ ソート機能を実装します。 序文...
目次1.関数内のこの方向1. 通常の機能2. コンストラクター3. オブジェクトメソッド4. イベン...
目次現象根本原因分析getLastPacketReceivedTimeMs() メソッドの呼び出し時...
【背景】最近勉強中に非常に恥ずかしいことに遭遇しました。MySQL のパスワードを忘れてしまい、My...
この記事では、mysql8.0.11クライアントがログインできない問題の解決策を紹介します。参考まで...
この記事では、JavaScriptキャンバスで流星の特殊効果を表示するための具体的なコードを参考まで...