ホームページ > ウェブフロントエンド > Vue.js > vueにマウントされたメソッドを宣言する方法

vueにマウントされたメソッドを宣言する方法

下次还敢
リリース: 2024-05-09 18:30:24
オリジナル
720 人が閲覧しました

Vue.js でマウントされたメソッドを宣言するにはどうすればよいですか?オブジェクト プロパティとして、コンポーネント インスタンスはこのコンテキストを通じてアクセスされ、メソッド オブジェクトに含まれるメソッド オプションとして、コンポーネント インスタンスにもこれを通じてアクセスされます。

vueにマウントされたメソッドを宣言する方法

Vue.js でマウントされたメソッドを宣言する方法

Vue.js ライフサイクルフック関数 mounted でメソッドを宣言することは、コンポーネントがマウントされた後にコードを実行する方法です。一般的なメソッドが搭載されています。メソッドを宣言するには 2 つの方法があります: mounted 中声明方法是一种在组件挂载后执行代码的常见方法。下面介绍两种声明方法的方式:

1. 作为对象属性

1

2

3

4

5

6

7

8

9

10

<code class="js">export default {

  mounted() {

    this.myMethod()

  },

  methods: {

    myMethod() {

      // 方法实现

    }

  }

}</code>

ログイン後にコピー

2. 作为方法选项

1

2

3

4

5

6

7

8

9

10

<code class="js">export default {

  mounted() {

    this.myMethod()

  },

  methods: {

   myMethod() {

      // 方法实现

    }

  }

}</code>

ログイン後にコピー

无论使用哪种方法,声明的方法都可以通过 this 上下文访问组件实例。

示例

1

2

3

4

5

6

7

8

9

10

<code class="js">export default {

  mounted() {

    this.logComponentMounted()

  },

  methods: {

   logComponentMounted() {

      console.log('组件已挂载')

    }

  }

}</code>

ログイン後にコピー

在上面的示例中,logComponentMounted

🎜1. オブジェクト属性として🎜🎜rrreee🎜2. メソッドのオプションとして🎜🎜rrreee🎜 どのメソッドが使用されても、宣言されたメソッドは thisコンテキスト アクセス コンポーネント インスタンス。 🎜🎜🎜例🎜🎜rrreee🎜 上記の例では、コンポーネントがマウントされた後に <code>logComponentMounted メソッドが呼び出され、ログ メッセージがコンソールに出力されます。 🎜

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

関連ラベル:
vue
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート