vue.prototypeの使い方

vue.prototype の使用方法: 各 Vue インスタンスで使用できるようにプロトタイプで定義します。コードは [Vue.prototype.$appName = 'My App'] で、コンソールに出力されます。私のアプリ。

このチュートリアルの動作環境: Windows10 システム、vue2.5.2、この記事はすべてのブランドのコンピューターに適用されます。

[関連記事の推奨事項: vue.js]

vue.prototype の使用方法:

Vue プロジェクトの main.js ファイル内:

Vue.prototype.$appName = 'My App'

このようにして、プロトタイプで定義することで、Vue のすべてのインスタンスで使用できるようになります。

new Vue({
  beforeCreate: function () {
    console.log(this.$appName)
  }
})

コンソールに「My App」が出力されます。それはとても簡単です！

「なぜ appName は $ で始まるのですか? それは重要ですか? それはどうなりますか?」

$ は Vue A のすべてのインスタンスにあります利用可能なプロパティの簡単な規則。そうすることで、定義されたデータ、メソッド、計算されたプロパティとの競合が回避されます。

たとえば、次のように記述します:

Vue.prototype.appName = 'My App'

vue インスタンス内:

new Vue({
  data: {
    appName: 'The name of some other app'
  },
  beforeCreate: function () {
    console.log(this.appName)
  },
  created: function () {
    console.log(this.appName)
  }
})

「My App」がログに最初に表示され、次に「他のアプリの名前」が表示されますthis.appName はインスタンスの作成後にデータで上書きされるため、「」と表示されます。 $ インスタンス プロパティのスコープを設定することで、この問題が発生するのを防ぎます。必要に応じて、プラグインや将来のプラグインとの競合を避けるために、$_appName や ΩappName などの独自の規則を使用することもできます。

関連する無料学習の推奨事項: JavaScript (ビデオ)

以上がvue.prototypeの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。