vue.prototype如何使用

vue.prototype的使用方法：透過在原型上定義使其在每個Vue的實例中可用，程式碼為【Vue.prototype.$appName = 'My App'】，控制台會列印出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 所有實例中都可用的屬性的一個簡單約定。這樣做會避免和已被定義的資料、方法、計算屬性產生衝突。

例如寫成：

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"，然後出現"The name of some other app"，因為this.appName 在實例被建立之後被data 覆寫了。我們透過 $ 為實例屬性設定作用域來避免這種事情發生。你也可以根據你的喜好使用自己的約定，諸如 $_appName或 ΩappName，來避免和插件或未來的插件相衝突。

相關免費學習推薦：JavaScript（影片）

#

以上是vue.prototype如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！