如何在多个.vue文件之间共享JS类与可复用业务逻辑？

你导入的x是Vue组件的配置对象，而非组件实例，自然不存在你定义的a属性和test方法：

• 配置对象上仅包含你显式声明的data、methods等配置项，a是data函数执行后返回的属性，test是methods下的方法，二者都需要等组件完成实例化后才会挂载到实例对象上
• 你仅把x注册为子组件，若没有在y.vue的模板中声明使用该组件，组件根本不会触发实例化流程

你不需要把纯逻辑封装为Vue组件，根据需求可以选以下两种更合适的实现：

方案1：普通JS模块（无响应式需求时首选） #

直接把要复用的逻辑封装为独立JS模块，完全和Vue框架、DOM解耦，使用方式和你之前常用的引入调用逻辑完全一致：

// common.js 独立逻辑文件
export const sharedData = {
  a: 'test'
}
export function test() {
  console.log("test : " + sharedData.a)
}

在y.vue中直接引入使用即可：

import { sharedData, test } from './common.js'
export default {
  name: "whatever",
  mounted() {
    sharedData.a = "it is working"
    test() // 正常输出 test : it is working
  }
}

方案2：组合式API可组合函数（需要响应式能力时使用） #

如果你需要用到Vue的响应式能力，又不想和DOM耦合，可以用Composition API编写可组合函数，完全规避mixins的作用域冲突问题：

// useCommon.js 可组合函数
import { ref } from 'vue'
export default function useCommon() {
  // 每次调用都会生成独立的响应式状态，多组件调用互不干扰
  const a = ref('test')
  function test() {
    console.log("test : " + a.value)
  }
  return { a, test }
}

在组件中使用：

import useCommon from './useCommon.js'
export default {
  name: "whatever",
  mounted() {
    const { a, test } = useCommon()
    a.value = "it is working"
    test() // 正常输出，a的修改具备响应式能力
  }
}

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