如何在Vue组件自定义meta属性中访问methods中的方法？

你的问题核心在于：自定义的meta是静态对象，在Vue实例创建前就已定义，箭头函数里的this无法指向实例，自然访问不到methods里的方法。下面提供几种可行的解决方案：

方案一：在created钩子中绑定handler #

利用Vue实例创建后的钩子，通过$options访问自定义的meta属性，重新赋值handler以绑定实例上下文：

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'Articles',

  meta: {
    topmenu: [
      {
        label: 'Create new',
        handler: null // 先预留空值
      }
    ]
  },

  methods: {
    onCreateNew () {
      console.log('creating new item')
    }
  },

  created() {
    // 实例初始化完成后，绑定handler到当前实例
    this.$options.meta.topmenu[0].handler = () => {
      this.onCreateNew()
    }
  }
})
</script>

$options可以直接访问组件定义时的所有选项，包括自定义的meta，此时箭头函数会捕获实例的this，确保能调用onCreateNew。

方案二：将meta定义为函数并在实例中调用 #

把meta改成返回对象的方法，在实例创建后调用该方法，让函数内的this指向Vue实例：

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'Articles',

  meta() {
    return {
      topmenu: [
        {
          label: 'Create new',
          handler: () => {
            this.onCreateNew()
          }
        }
      ]
    }
  },

  methods: {
    onCreateNew () {
      console.log('creating new item')
    }
  },

  created() {
    // 调用meta方法，获取绑定了实例上下文的meta对象
    this.meta = this.meta()
  }
})
</script>

之后你可以通过this.meta直接访问带实例上下文的属性，handler能正常调用实例方法。

方案三：通过方法名间接调用 #

在meta中保存方法名称，触发时通过实例的属性访问方式调用方法，避免绑定this的问题：

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'Articles',

  meta: {
    topmenu: [
      {
        label: 'Create new',
        handlerName: 'onCreateNew' // 存储方法名
      }
    ]
  },

  methods: {
    onCreateNew () {
      console.log('creating new item')
    },
    // 触发菜单点击时调用此方法
    triggerMenuItem(menuItem) {
      this[menuItem.handlerName]()
    }
  }
})
</script>

这种方式更灵活，适合需要动态切换方法的场景，直接通过this[方法名]即可调用实例内的方法。

内容的提问来源于stack exchange，提问作者aspirinemaga