如何将JavaScript变量传递至Vue2实例？（jQuery Mobile场景）

直接操作Vue实例的响应式数据是最直接高效的方式：

1. 初始化Vue实例时，将其赋值给一个原生脚本可访问的变量（比如全局作用域或共同作用域）：

// 初始化Vue实例
const vm = new Vue({
  el: '#app',
  data() {
    return {
      numb: ''
    }
  }
})

2. 在原生JS脚本拿到last2后，直接给Vue实例的numb属性赋值：

// 原生JS中获取到选中项文本最后两位last2后
vm.numb = last2;

Vue2的data属性是响应式的，赋值后会自动触发视图更新，完全无需手动操作输入框。

方案1：自定义事件通信 #

如果Vue实例的作用域无法直接被原生脚本访问（比如复杂组件嵌套场景），可以通过自定义事件实现跨环境通信：

• 在Vue实例的mounted钩子中监听全局自定义事件：

mounted() {
  window.addEventListener('updateNumb', (event) => {
    this.numb = event.detail;
  });
}

• 在原生JS脚本中触发事件并传递last2：

// 获取到last2后
window.dispatchEvent(new CustomEvent('updateNumb', {
  detail: last2
}));

方案2：全局变量中转（不推荐） #

如果项目场景非常简单，也可以用全局变量做中转，但这种方式容易造成全局污染，仅适合小型临时场景：

• 原生JS中把last2赋值给全局变量：

window.globalLast2 = last2;

• 在Vue实例中初始化同步并处理后续更新：

data() {
  return {
    numb: ''
  }
},
mounted() {
  // 初始化同步一次
  this.numb = window.globalLast2;
  // 若原生脚本会多次更新last2，需在原生赋值后手动触发Vue更新
  // 比如原生赋值后调用 vm.$forceUpdate()，或结合自定义事件触发
}

该方案的弊端是全局变量管理混乱，且原生修改全局变量不会自动触发Vue响应，需要额外处理更新逻辑。

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