旧MVC混合技术栈中，如何从外部JS设置Vue组件Prop？

核心问题 #

你之前的错误在于把客户ID放在Vue实例的data里，但组件监听的是自己的Prop，必须直接将值传递给组件的Prop，而不是实例的data。以下是无需修改组件的实现方案：

Vue 2 实现方式 #

假设你的组件已全局注册（比如叫CustomerInfoComponent），或者你能在旧JS文件中获取到组件的选项对象：

// 从旧逻辑中获取客户ID，比如从DOM或JQuery拿到
const targetCustomerId = $('#customer-info').data('customer-id');
// 找到要挂载组件的DOM容器
const mountContainer = document.getElementById('vue-customer-container');

// 实例化组件并传递Prop
const vueInstance = new Vue({
  el: mountContainer,
  // 用render函数渲染组件，明确传递prop
  render: h => h(CustomerInfoComponent, {
    props: {
      customerId: targetCustomerId // 对应组件中定义的prop名称
    }
  })
});

// 如果后续需要更新客户ID，直接修改实例的prop即可（响应式生效）
// vueInstance.$props.customerId = 'new-customer-id';

Vue 3 实现方式 #

如果用的是Vue 3，通过createApp直接传递初始prop：

// 若组件是模块化导出，确保旧JS能访问到（比如通过全局变量或CDN引入）
import { createApp } from 'vue';
import CustomerInfoComponent from './components/CustomerInfoComponent.vue';

const targetCustomerId = document.querySelector('#customer-info').dataset.customerId;
const mountContainer = document.getElementById('vue-customer-container');

// 创建组件实例并传递prop
const appInstance = createApp(CustomerInfoComponent, {
  customerId: targetCustomerId // 对应组件的prop名称
}).mount(mountContainer);

// 后续更新客户ID
// appInstance.customerId = 'new-customer-id';

关键说明 #

1. 为什么之前的方法无效：组件的watch监听的是自身定义的Prop，你之前把值放在Vue实例的data里，组件根本没接收到这个值，自然不会触发watch。
2. 无需修改组件：所有操作都在外部JS中完成，完全不影响组件在其他场景的使用。
3. 兼容JQuery：如果你的客户ID是通过JQuery获取的，直接把JQuery返回的值赋值给targetCustomerId即可，比如const targetCustomerId = $('.customer').attr('data-id');

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