vue3 カスタムディレクティブの詳細

1. カスタム指示の登録

以下の例はすべて、入力ボックスが自動的にフォーカスを取得するように実装するためのカスタム命令です。

1.1. グローバルカスタム指示

vue2 では、グローバルカスタムディレクティブは、 Vue.directive('name',opt)を使用して、 directiveを通じて Vue オブジェクトにマウントされます。

例1 : Vue2グローバルカスタム命令

Vue.directive('focus',{

 挿入:(el)=>{

  el.フォーカス()

 }

})

inserted 、バインドされた要素が親ノードに挿入されるときに実行されるフック関数です。

vue3では、 createAppを通じて vue インスタンスが作成されるため、グローバルカスタムディレクティブのマウント方法も変更され、 directiveがアプリにマウントされるようになりました。

例2 : Vue3グローバルカスタム命令

//グローバルカスタムディレクティブ app.directive('focus',{

 マウントされた(el){

  el.フォーカス()

 }

})

//コンポーネントは <input type="text" v-focus /> を使用します

1.2. ローカルカスタム指示

コンポーネントでは、 directivesを使用してローカルカスタムディレクティブを導入します。 Vue2とVue3で導入されたカスタムディレクティブはまったく同じです。

例3 : ローカルカスタム指示

<スクリプト>

//ローカルカスタム命令 const defineDir = {

 集中：

  マウントされた(el){

   el.フォーカス()

  }

 }

}

エクスポートデフォルト{

 ディレクティブ:defineDir、

 設定（）{}

}

</スクリプト>

2. カスタム命令のライフサイクルフック関数

ディレクティブ定義オブジェクトは、次のフック関数を提供できます（すべてオプションで、必要に応じて導入されます）

created : バインドされた要素属性またはイベントリスナーが適用される前に呼び出されます。これは、通常の v-on イベントリスナーの前に呼び出す必要があるイベントリスナーをディレクティブでアタッチする必要がある場合に便利です。
beforeMounted : ディレクティブが最初に要素にバインドされ、親コンポーネントがマウントされる前に実行されます。
mounted : バインドされた要素の親コンポーネントがマウントされた後に呼び出されます。
beforeUpdate : コンポーネントを含む VNode が更新される前に呼び出されます。
updated : 包含コンポーネントの VNode とそのサブコンポーネントの VNode が更新された後に呼び出されます。
beforeUnmounted : バインドされた要素の親コンポーネントがアンマウントされる前に呼び出されます
unmounted : ディレクティブが要素からアンバインドされ、親コンポーネントがアンマウントされたときに 1 回だけ呼び出されます。

例3 : 命令内のライフサイクル関数の実行をテストする

<テンプレート>

 <div>

  <input type="text" v-focus v-if="show"><br>

  <button @click="changStatus">{{show?'非表示':'表示'}}</button>

 </div>

</テンプレート>

 

//ローカルカスタム命令 const autoFocus = {

 集中：

  作成された(){

   console.log('作成されました');

  },

  マウント前(){

   console.log('マウント前');

  },

  マウントされた(el){

   console.log('マウントされました');

  },

  更新前(){

   コンソールログ('beforeUpdated')

  },

  更新されました(){

   console.log('更新されました');

  },

  アンマウント前(){

   console.log('アンマウント前');

  },

  アンマウント(){

   console.log('マウント解除されました');

  }

 },

}

'vue' から { ref } をインポートします

エクスポートデフォルト{

 ディレクティブ:autoFocus、

 設定（）{

  定数 show = ref(true)

  戻る {

   見せる、

   ステータスの変更(){

    表示値 = !表示値

   }

  }

 }

}

ボタンをクリックすると、 input要素が作成されると、 created 、 beforeMount 、およびmountedの 3 つのフック関数がトリガーされることがわかります。

input要素が非表示の場合、 beforeUnmountとunmountedトリガーされます。

ただし、追加したbeforeUpdateとupdated関数は実行されませんでした。

ここで、 input要素のv-if v-showに変更すると、上記2つのメソッドが実行されます。具体的な実行状況はご自身で確認することができます。

vue2からvue3ではカスタム命令のライフサイクルフック機能が変更になりました。具体的な変更点は以下の通りです。

bind関数はbeforeMountedに置き換えられました。
update削除されました。
componentUpdated updatedに置き換えられました。
unbind unmountedに置き換えられました。
insertedが削除されました。

3. カスタム命令フック関数のパラメータ

フック関数には次のパラメータが与えられます。

el : 命令がバインドされ、 DOMを直接操作できる要素。
binding : ディレクティブのすべての情報を含むオブジェクトです。

バインディングに含まれるプロパティは次のとおりです。

argはカスタム命令のパラメータ名です。
value カスタムディレクティブにバインドされたvalue 。
oldValueディレクティブがバインドされていた以前の値。
dirフック関数が実行されました
modifiers : 修飾子を含むオブジェクト。

<テンプレート>

 <div>

  <div v-fixed >配置</div>

 </div>

</テンプレート>

 

<スクリプト>

//カスタム命令の動的パラメータ const autoFocus = {

 修理済み：

  beforeMount(el,binding){

   コンソールログ('el',el)

   console.log('binding',binding)

  }

 }

}

エクスポートデフォルト{

 ディレクティブ:autoFocus、

 設定（）{

 }

}

</スクリプト>

4. カスタムコマンドパラメータ

カスタム命令にはパラメータも設定でき、コンポーネントインスタンスデータに基づいて動的にリアルタイムで更新できます。

例4 : 命令の動的パラメータのカスタマイズ

<テンプレート>

 <div>

  <div v-fixed:pos="posData" style="width:100px;height:100px;background:grey">配置</div>

 </div>

</テンプレート>

<スクリプト>

//カスタム命令の動的パラメータ const autoFocus = {

 修理済み：

  beforeMount(el,binding){

   el.style.position = "固定"

   el.style.left = binding.value.left+'px'

   el.style.top = binding.value.top + 'px'

  }

 }

}

エクスポートデフォルト{

 ディレクティブ:autoFocus、

 設定（）{

  定数posData = {

   残り:20,

   トップ:200

  }

  戻る {

   posデータ、

  }

 }

}

</スクリプト>

カスタムディレクティブはいつ必要になりますか?

通常の DOM 要素に対して低レベルの操作を実行する必要があり、このときにカスタム命令が使用されます。
一部の機能は特定の DOM 要素に対して使用する必要がありますが、多数の DOM 要素を操作したり、大幅な変更を加えたりする必要がある場合は、ディレクティブではなくコンポーネントを使用することをお勧めします。

vue3 カスタム手順の詳細に関するこの記事はこれで終わりです。より関連性の高い vue3 カスタム手順については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

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