How to declare methods in mounted in vue

How to declare methods in Vue.js mounted? As an object property, the component instance is accessed through this context; as a method option, contained in the methods object, the component instance is also accessed through this.

How to declare methods in mounted in Vue.js

In Vue.js life cycle hook function## Declaring methods in #mounted is a common way to execute code after the component is mounted. Here are two ways to declare methods:

1. As an object attribute

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

2. As a method option

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

Regardless of which method is used, the declared method has access to the component instance through the

this context.

Example

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

In the above example, the

logComponentMounted method is called after the component is mounted and outputs a log message to the console.

The above is the detailed content of How to declare methods in mounted in vue. For more information, please follow other related articles on the PHP Chinese website!