vue中mounted中如何声明方法

百变鹏仔 4个月前 (09-25) #VUE

文章标签声明

如何声明 vue.js mounted 中的方法？作为对象属性，通过 this 上下文访问组件实例；作为方法选项，包含在 methods 对象中，同样通过 this 访问组件实例。

如何在 Vue.js 的 mounted 中声明方法

在 Vue.js 生命周期钩子函数 mounted 中声明方法是一种在组件挂载后执行代码的常见方法。下面介绍两种声明方法的方式：

1. 作为对象属性

export default {  mounted() {    this.myMethod()  },  methods: {    myMethod() {      // 方法实现    }  }}

2. 作为方法选项

立即学习“前端免费学习笔记（深入）”；

export default {  mounted() {    this.myMethod()  },  methods: {   myMethod() {      // 方法实现    }  }}

无论使用哪种方法，声明的方法都可以通过 this 上下文访问组件实例。

示例

export default {  mounted() {    this.logComponentMounted()  },  methods: {   logComponentMounted() {      console.log('组件已挂载')    }  }}

在上面的示例中，logComponentMounted 方法在组件挂载后调用，并输出一条日志消息到控制台。

文章推荐