如何从Razor视图初始化时向Svelte组件传递数据？

嘿，这个场景我在混合.NET Razor和Svelte的项目里折腾过好几次，给你分享几个实用的解决方案，都是亲测有效的：

既然你的Razor视图能拿到所有动态数据，那可以在页面里先输出一个脚本块，把需要传递给Svelte的存在全局变量里，然后让Svelte初始化时读取这个变量。

比如在你的.cshtml页面（或者_Layout里针对有注册表单的页面）添加：

<!-- 在#signup-form元素上方或者页面头部 -->
<script>
  // 用Razor直接渲染动态数据，复杂对象用Json.Serialize转成JSON
  window.signupInitData = @Html.Raw(Json.Serialize(new {
    translations = Model.SignupTranslations, // 从CMS取的多语言文本
    prefilledEmail = User.Identity.IsAuthenticated ? User.Identity.Name : null,
    someInputData = "aStaticValue"
  }));
</script>

然后修改你的app.js入口文件：

import Signup from './Components/Signup/signup.svelte';

// 读取全局变量里的初始化数据，没有的话用默认值
const initProps = window.signupInitData || { someInputData: 'aStaticValue' };

new Signup({ 
  target: document.querySelector('#signup-form'), 
  props: initProps
});

这个方法的优点是零额外配置，上手快，适合快速验证需求。

如果不想污染全局作用域，可以把数据绑定到承载Svelte组件的DOM元素上，用HTML的data-*属性存储：

在.cshtml里渲染容器元素时：

<div id="signup-form"
     data-signup-data='@Html.Raw(Json.Serialize(new {
       translations = Model.SignupTranslations,
       prefilledEmail = User.Identity.IsAuthenticated ? User.Identity.Name : ""
     }))'>
</div>

然后在app.js里读取这些data属性：

import Signup from './Components/Signup/signup.svelte';

const targetElement = document.querySelector('#signup-form');
// 解析data属性里的JSON字符串
const initData = JSON.parse(targetElement.dataset.signupData);

new Signup({ 
  target: targetElement, 
  props: {
    ...initData,
    someInputData: 'aStaticValue' // 合并静态默认值
  }
});

这种方式的好处是数据和组件容器强绑定，就算页面有多个Svelte组件实例也不会冲突，更干净。

如果需要针对不同页面做个性化的初始化，还可以直接在Razor里渲染Svelte的初始化代码，这样参数完全由Razor控制。

首先要修改webpack配置，把Signup组件暴露到全局作用域：

// webpack.config.js
module.exports = {
  // 其他配置...
  output: {
    library: 'Signup', // 组件的全局名称
    libraryTarget: 'window' // 挂载到window对象上
  }
};

然后在.cshtml页面里，引入打包后的app.js之后，直接写初始化脚本：

<script src="~/Content/Scripts/app.js"></script>
<script>
  // 直接用Razor变量作为组件props
  new Signup({
    target: document.querySelector('#signup-form'),
    props: {
      translations: @Html.Raw(Json.Serialize(Model.SignupTranslations)),
      prefilledEmail: '@(User.Identity.IsAuthenticated ? User.Identity.Name : "")',
      someInputData: 'aStaticValue'
    }
  });
</script>

这个方案适合需要根据页面上下文动态调整组件参数的场景，灵活性最高。

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