Vue3如何从外部JS调用组件方法或设置组件属性？

先修正你代码中的一个关键错误 #

你原代码里的 this.$refs.containerForMessage = message 是无效的——$refs.containerForMessage 获取的是DOM元素，要修改内容需用 textContent 或 innerHTML，比如：

setMessage(message = '') {
  if (this.$refs.containerForMessage) {
    this.$refs.containerForMessage.textContent = message
  }
}

以下是几种更优的通信实现方案：

方案1：全局挂载Vue实例（最直接的小型场景方案） #

将Vue实例挂载到window对象，外部JS可直接访问组件的方法和属性。

1. main.js 中挂载实例

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
const vm = app.mount('#app')
// 挂载到全局window
window.vueApp = vm

2. App.vue 完善方法

<template>
  <div class="container-fluid">
    <div ref="containerForMessage"></div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      someProp: {},
    };
  },
  methods: {
    setMessage(message = '') {
      if (this.$refs.containerForMessage) {
        this.$refs.containerForMessage.textContent = message
      }
    },
    updateSomeProp(newProp) {
      // 可在这里加入属性验证、逻辑触发等
      this.someProp = newProp
    }
  }
}
</script>

3. 外部jQuery代码调用

// 触发设置消息
$("#fireButton").on("click", function() {
  let textInsert = $(this).text();
  window.vueApp.setMessage(textInsert);
});

// 触发修改someProp
$("#setPropButton").on("click", function() {
  let newProp = {"1":"one","2":"two"};
  window.vueApp.updateSomeProp(newProp);
});

方案2：优化自定义事件（解耦式方案） #

用原生CustomEvent替代jQuery事件系统，更轻量且解耦，避免全局依赖。

1. App.vue 监听原生事件

<template>
  <div class="container-fluid">
    <div ref="containerForMessage"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      someProp: {},
    };
  },
  mounted() {
    // 监听自定义事件
    document.addEventListener('vue-set-message', this.handleSetMessage)
    document.addEventListener('vue-update-prop', this.handleUpdateProp)
  },
  beforeUnmount() {
    // 卸载时移除监听，防止内存泄漏
    document.removeEventListener('vue-set-message', this.handleSetMessage)
    document.removeEventListener('vue-update-prop', this.handleUpdateProp)
  },
  methods: {
    handleSetMessage(e) {
      if (this.$refs.containerForMessage && e.detail?.message) {
        this.$refs.containerForMessage.textContent = e.detail.message
      }
    },
    handleUpdateProp(e) {
      if (e.detail?.newProp) {
        this.someProp = e.detail.newProp
      }
    }
  }
}
</script>

2. 外部JS触发事件

// 设置消息
$("#fireButton").on("click", function() {
  let textInsert = $(this).text();
  document.dispatchEvent(new CustomEvent('vue-set-message', {
    detail: { message: textInsert }
  }))
});

// 修改属性
$("#setPropButton").on("click", function() {
  let newProp = {"1":"one","2":"two"};
  document.dispatchEvent(new CustomEvent('vue-update-prop', {
    detail: { newProp }
  }))
});

方案3：全局状态容器（多场景共享方案） #

如果需要多处共享状态，用Vue响应式对象封装全局状态，组件可直接绑定响应更新。

1. 创建全局状态文件 src/utils/globalState.js

import { reactive } from 'vue'

// 响应式全局状态
export const globalState = reactive({
  message: '',
  someProp: {}
})

// 封装修改方法
export const setGlobalMessage = (msg) => {
  globalState.message = msg
}

export const setGlobalSomeProp = (prop) => {
  globalState.someProp = prop
}

2. App.vue 绑定状态

<template>
  <div class="container-fluid">
    <!-- 直接绑定状态，无需手动操作DOM -->
    <div>{{ globalState.message }}</div>
  </div>
</template>

<script>
import { globalState } from './utils/globalState'

export default {
  name: 'App',
  data() {
    return {
      globalState
    };
  }
}
</script>

3. 外部JS调用修改方法

// main.js 中挂载方法到全局
import { setGlobalMessage, setGlobalSomeProp } from './utils/globalState'
window.setGlobalMessage = setGlobalMessage
window.setGlobalSomeProp = setGlobalSomeProp

// 外部jQuery代码
$("#fireButton").on("click", function() {
  let textInsert = $(this).text();
  window.setGlobalMessage(textInsert);
});

$("#setPropButton").on("click", function() {
  let newProp = {"1":"one","2":"two"};
  window.setGlobalSomeProp(newProp);
});

注意事项 #

• 尽量通过组件方法修改属性，而非直接操作响应式对象，方便后续添加验证、逻辑触发等。
• 使用自定义事件时，务必在组件卸载时移除监听，避免内存泄漏。
• 大型项目建议用Pinia/Vuex管理全局状态，小型场景用全局挂载或自定义事件即可。

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