Vueのメソッド内にメソッドを記述する方法

Vue では、[メソッド] オプションでメソッドを記述する手順は次のとおりです。 コンポーネントの JavaScript ブロックでメソッド オブジェクトを定義します。メソッドは関数式を使用し、キャメルケース表記を使用し、パラメーターなしで定義されます。メソッド本体内で this キーワードを使用してコンポーネント インスタンスにアクセスします。 v-on ディレクティブを使用して、メソッド名を引数として指定してテンプレートからメソッドを呼び出します。メソッドは同期または非同期にすることができ、非同期メソッドは async キーワードを使用して宣言されます。

Vue のメソッドでのメソッドの記述

Vue では、methods オプションが使用されますコンポーネントのテンプレートから呼び出すことができる再利用可能なメソッドを定義するために使用されます。これらのメソッドを作成するときは、次の手順に従う必要があります。

1. メソッド オプションでメソッドを定義します。

JavaScript で methods という名前の新しいメソッドを作成します。コンポーネント オブジェクトのコード ブロック:

export default {
  methods: {
    // 方法定义
  }
}

2. 関数式を使用してメソッドを定義します。 methods

オブジェクトで、 function を使用します。メソッドを定義する式。メソッド名にはキャメル ケースを使用する必要があり、関数自体にはパラメーターはありません:

methods: {
  myMethod() {
    // 方法体
  }
}

3。このインスタンスにアクセスするには、メソッド本体で # を使用できます。 ##this

キーワードは、コンポーネント インスタンスとそのデータおよびメソッドにアクセスします。たとえば、コンポーネントの

data オブジェクトにアクセスするには、this.data

:

methods: {
  myMethod() {
    console.log(this.data.message);
  }
}

4 メソッドを呼び出します。テンプレートから ##コンポーネント テンプレートからメソッドを呼び出す場合は、v-on ディレクティブを使用し、メソッド名をパラメータとして指定します: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;button @click=&quot;myMethod&quot;&gt;点击&lt;/button&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>

5。 . 非同期メソッド

Vue メソッドは同期または非同期にすることができます。同期メソッドはすぐに実行されますが、非同期メソッドは Promise オブジェクトを返すことによって非同期に実行されます。

async

キーワードを使用して、非同期メソッドを宣言します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>methods: { async myAsyncMethod() { // 异步代码 } }</pre><div class="contentsignin">ログイン後にコピー</div></div> 注: <p><strong></strong></p>メソッド名は一意である必要があります。 <p><code>メソッドはオプションのパラメーターを受け入れることができますが、これらはメソッド定義で明示的に指定する必要があります。

Methoden のメソッドは相互に呼び出すことができます。

データがメソッド内で変更された場合、テンプレートを更新できるように、応答的な変更をトリガーする必要があります。

以上がVueのメソッド内にメソッドを記述する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。