首頁 >web前端 >Vue.js >vuemounted中如何聲明方法

vuemounted中如何聲明方法

下次还敢
下次还敢原創
2024-05-09 18:30:24694瀏覽

如何宣告 Vue.js mounted 中的方法?作為物件屬性,透過 this 上下文存取元件實例;作為方法選項,包含在 methods 物件中,同樣透過 this 存取元件實例。

vuemounted中如何聲明方法

如何在Vue.js 的mounted 中宣告方法

在Vue.js 生命週期鉤子函數mounted 中宣告方法是一種在元件掛載後執行程式碼的常見方法。以下介紹兩種宣告方法的方式:

1. 作為物件屬性

<code class="js">export default {
  mounted() {
    this.myMethod()
  },
  methods: {
    myMethod() {
      // 方法实现
    }
  }
}</code>

2. 作為方法選項

<code class="js">export default {
  mounted() {
    this.myMethod()
  },
  methods: {
   myMethod() {
      // 方法实现
    }
  }
}</code>

無論使用哪一種方法,宣告的方法都可以透過this 上下文存取元件實例。

範例

<code class="js">export default {
  mounted() {
    this.logComponentMounted()
  },
  methods: {
   logComponentMounted() {
      console.log('组件已挂载')
    }
  }
}</code>

在上面的範例中,logComponentMounted 方法在元件掛載後調用,並輸出一條日誌訊息到控制台。

以上是vuemounted中如何聲明方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn