Vue パブリック メソッドの実装方法の簡単な分析

Vue は、開発者がユーザー インターフェイスを迅速に構築するために使用できる人気のある JavaScript フレームワークです。 Vue では、パブリック メソッドは非常に重要な部分です。この記事では、Vue のパブリック メソッドを紹介します。

Vue では、パブリック メソッドはグローバル メソッドまたはインスタンス メソッドになります。グローバル メソッドは Vue オブジェクトにマウントされたメソッドであり、任意の Vue インスタンスで呼び出すことができます。インスタンス メソッドは Vue インスタンスにマウントされたメソッドであり、現在のインスタンスでのみ呼び出すことができます。

Vue でグローバル メソッドを定義する最も簡単な方法は、Vue オブジェクトのプロトタイプを使用することです。このプロトタイプ オブジェクトは、以下に示すように、Vue の初期化の前後に追加できます。

// 在Vue初始化之前添加原型方法
Vue.prototype.sayHello = function() {
  console.log('Hello, Vue!');
}

// 在Vue初始化之后添加原型方法
var vm = new Vue({
  el: '#app',
  mounted: function() {
    Vue.prototype.sayHello();
  }
});

// 输出结果：Hello, Vue!

この例では、sayHello という名前のメソッドを Vue プロトタイプに追加し、それを呼び出します。挨拶を出力します。

Vue プロトタイプを使用してグローバル メソッドを追加するだけでなく、Vue.mixin() を使用してメソッドのグループをグローバル メソッドとして追加することもできます。これは、次のように複数の Vue コンポーネント間で一連のメソッドを共有することで実行できます。

// 定义一个名为myMixin的对象
var myMixin = {
  methods: {
    sayHello: function() {
      console.log('Hello, Vue!');
    }
  }
}

// 使用Vue.mixin()添加myMixin对象为全局方法
Vue.mixin(myMixin);

// 在Vue实例中调用sayHello方法
var vm = new Vue({
  el: '#app',
  mounted: function() {
    this.sayHello();
  }
});

// 输出结果：Hello, Vue!

この例では、sayHello# を含む myMixin という名前の JavaScript オブジェクトを定義します。 ＃＃ 方法。次に、Vue.mixin() を使用して、このオブジェクトをグローバル メソッドとして追加します。最後に、Vue インスタンスの sayHello メソッドを呼び出して、挨拶を出力します。

グローバル メソッドに加えて、Vue はインスタンス メソッドもサポートします。これらのメソッドは Vue インスタンスに追加でき、このインスタンス内でのみ呼び出すことができます。 Vue.extend() メソッドを使用してカスタム メソッドでサブクラスを作成し、それを Vue インスタンスでインスタンス化できます。

次は、Vue.extend() メソッドを使用してインスタンス メソッドを作成する例です。

// 定义一个名为myMixin的子类
var myMixin = Vue.extend({
  methods: {
    sayHello: function() {
      console.log('Hello, Vue!');
    }
  }
});

// 在Vue实例中实例化myMixin
var vm = new myMixin({
  el: '#app',
  mounted: function() {
    this.sayHello();
  }
});

// 输出结果：Hello, Vue!

この例では、

myMixin という名前のサブクラスを定義します。 sayHello という名前のメソッドが含まれています。次に、Vue インスタンスで myMixin をインスタンス化し、mounted ライフサイクル フックで sayHello メソッドを呼び出します。

Vue のパブリック メソッドのパラメータには、文字列、数値、オブジェクト、関数など、JavaScript 関数でサポートされている任意のパラメータ タイプを使用できます。 Vue 開発が初めての場合は、Vue のパブリック メソッドの構文とパラメータの記述についてある程度理解しておくと、Vue フレームワークの基本知識をよりよく習得できるようになります。

以上がVue パブリック メソッドの実装方法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。