如何将全局变量作为Prop传入Vue组件（JSP旧项目场景）

方案1：直接绑定全局window对象变量 #

mydata作为全局变量会默认挂载在window对象下，Vue模板里可以直接通过window.mydata绑定prop，无需JSON序列化/反序列化，直接传递完整JS对象：

<div id="app">
  <my-component v-bind:myprop="window.mydata"></my-component>
</div>

这种方式最直接，既避免了JSON转换的性能损耗，也不会丢失对象中的函数、Date等特殊类型信息。

方案2：转为Vue响应式数据（适配后续更新场景） #

如果mydata后续可能被修改，且需要Vue组件感知到变化，建议把全局变量转成Vue的响应式数据再传递：

<script>
var mydata = {
  name: "Bob",
  age: 45
}

new Vue({
  el: '#app',
  data() {
    return {
      // 浅拷贝全局变量，转为响应式数据
      localData: { ...mydata }
    }
  },
  components: {
    'my-component': {
      props: ['myprop'],
      template: '<div>{{ myprop.name }} - {{ myprop.age }}</div>'
    }
  }
})
</script>

<div id="app">
  <my-component :myprop="localData"></my-component>
</div>

如果是嵌套对象，需要用深拷贝（比如JSON.parse(JSON.stringify(mydata))或第三方工具）来保证深层属性的响应式。

方案3：服务器端直接注入数据（推荐，减少全局污染） #

既然是JSP项目，完全可以在服务器端直接把数据渲染成组件prop值，省去客户端全局变量：
假设后端已有mydata对象，用JSON工具（如Gson）转成JSON字符串后直接输出：

<div id="app">
  <my-component :myprop='<%= new com.google.gson.Gson().toJson(mydata) %>'></my-component>
</div>

这种方式消除了全局变量污染，数据在页面渲染时直接注入，更安全高效。

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