如何在setup函数外使用vue-meta-3的useAPI？子组件meta无法覆盖父组件

问题根因 #

• vue-meta 3 的元数据覆盖逻辑默认依赖组件实例的层级深度计算权重，setup 内调用 useMeta 时会自动绑定当前组件实例，继承层级权重，子组件深度更深、权重更高，自然可以覆盖父组件配置。
• 你在 mounted 钩子（setup 外）直接调用 useMeta 并传入全局存储的 metaManager 时，没有绑定当前组件实例，所有组件调用的元数据权重都为默认值，先注册的父组件配置优先级更高，子组件自然无法覆盖。

可行解决方案 #

方案1：setup外调用时主动绑定组件实例 #

getCurrentInstance 是 Vue 3 官方公开的合法API，不属于不推荐的hack方案（只有直接修改实例下划线开头的私有属性才是违规用法），你可以在调用时主动传入实例参数，让vue-meta自动计算层级权重：

import { getCurrentInstance } from 'vue'

export default {
  mounted() {
    const currentInstance = getCurrentInstance()
    useMeta(
      {
        title: 'Offer',
        og: {
          description: ` is the description`,
        },
      },
      {
        manager: this.metaManager,
        instance: currentInstance
      }
    );
  }
}

方案2：setup内传入响应式参数，无需接触组件实例 #

如果只是需要在meta中使用动态的组件关联数据，不需要非得在setup外调用useMeta，直接给useMeta传入计算属性即可满足需求，同时符合Vue最佳实践，也能正常实现子组件覆盖父组件的逻辑：

import { computed } from 'vue'
import { useStore } from 'vuex'

export default {
  setup() {
    const store = useStore()
    // 示例：动态获取vuex中存储的业务数据，异步更新后meta会自动同步修改
    const pageTitle = computed(() => store.state.currentOffer.title || 'Offer')
    const ogDesc = computed(() => store.state.currentOffer.description || ' is the description')

    useMeta({
      title: pageTitle,
      og: {
        description: ogDesc
      }
    })
  }
}

方案3：手动指定权重 #

如果确实不需要绑定组件实例，可以手动给不同层级的组件设置weight参数，数值越高优先级越高，子组件设置比父组件更大的权重值即可实现覆盖：

// 父组件设置权重为5
useMeta(父组件配置, {
  manager: this.metaManager,
  weight: 5
})

// 子组件设置权重为10，优先级更高即可覆盖
useMeta(子组件配置, {
  manager: this.metaManager,
  weight: 10
})

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