Vue.js如何向根组件传递数据？.NET Core+Vue场景疑问

我之前也碰到过一模一样的场景——从传统的Vue单页实例转到组件化结构时，初始数据传递确实是个容易卡壳的点，不想多发起一次AJAX请求的话，下面几个方案都能完美解决你的问题：

方案1：通过全局变量注入初始数据 #

这是最直接的实现方式，把后端Model数据挂载到window全局对象上，再传递给Vue根组件：

1. 在你的CSHTML页面中，在引入Vue打包JS之前添加这段脚本，把序列化后的Model数据赋值给全局变量：

<script>
// 用带应用前缀的独特命名，避免和其他全局变量冲突
window.__MY_APP_INITIAL_DATA__ = @Html.Raw(Json.Serialize(Model.SomeJsonObject));
</script>

2. 在Vue入口JS文件中，读取全局变量并作为props传递给根组件：

import RootElement from "../Vue/RootElement.vue";
import Vue from 'vue';

let vm = new Vue({
  el: '#root-element',
  render: h => h(RootElement, {
    props: {
      initialData: window.__MY_APP_INITIAL_DATA__
    }
  })
});

3. 在RootElement.vue组件中定义对应的props接收数据：

<template>
  <!-- 你的组件模板内容 -->
</template>
<script>
export default {
  props: {
    initialData: {
      type: Object, // 根据你的实际数据类型调整
      required: true
    }
  },
  data() {
    // 如果需要修改数据，可以把props复制到本地data中
    return {
      vueData: { ...this.initialData }
    }
  }
}
</script>

这个方案的优点是实现简单，不需要额外配置；唯一需要注意的是变量命名要独特，避免全局命名冲突。

方案2：通过根元素的data属性传递数据 #

这种方式更符合HTML规范，不会污染全局变量，把数据存储在根元素的自定义data属性中：

1. 在CSHTML里给根元素添加data属性（注意用单引号包裹值，避免JSON中的双引号冲突）：

<div id="root-element" data-initial-data='@Html.Raw(Json.Serialize(Model.SomeJsonObject))'></div>

2. 在Vue入口JS中读取data属性并解析JSON：

import RootElement from "../Vue/RootElement.vue";
import Vue from 'vue';

const rootElement = document.getElementById('root-element');
// 解析data属性中的JSON字符串
const initialData = JSON.parse(rootElement.dataset.initialData);

let vm = new Vue({
  el: rootElement,
  render: h => h(RootElement, {
    props: {
      initialData: initialData
    }
  })
});

3. 同样在RootElement.vue中定义props接收数据，和方案1的步骤3一致。

这个方案的优点是更优雅，不会污染全局空间；需要注意确保序列化后的JSON字符串没有语法错误，不过Json.Serialize通常会自动处理好转义问题。

方案3：（进阶）服务器端渲染（SSR） #

如果你的应用规模较大，后续有SEO或复杂服务端渲染需求，可以考虑结合Vue SSR和.NET Core，但这个方案配置相对复杂，对于当前的简单场景来说有点过重，所以前两个方案是更合适的选择。

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