Question

我目前正在使用dotnet核心后端和前面的一些Vue.js元素构建应用程序。我能够在cshtml文件中使用常规Vue（非模板，普通非es6 javascript语法）构建应用程序，但我一直在尝试使用.vue文件中的vue组件转向更模块化的结构。

我遇到的问题是，在原始版本中，我可以在实例化根元素时访问Json对象：

var jsonRenderedWithHtml = @Html.Raw(Json.Serialize(Model.SomeJsonObject));

vm = new Vue({
        el: "#root-element",
        data: {
            vueData: jsonRenderedFromHtml;
        }, ...

当我切换到组件版本时，根据我发现的内容，我需要从javascript文件中渲染根元素，执行以下操作：

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

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

然后，我会在cshtml文件的@section Scripts部分导入此脚本。不幸的是，从javascript文件中，似乎没有一种方法可以从外部传递数据（来自cshtml文件）。似乎如果我在vue根实例中编写一个AJAX请求，则需要执行两个服务器请求来执行相同的工作。

我似乎也不能在cshtml中使用import语句（对于cshtml来说，似乎不是任何webpack加载器？）。否则，我会跳过在单独的javascript文件中渲染元素。

Answer 1

我们在应用程序中所做的是将通过json将添加到ViewData的数据输出到视图中到脚本标签中，并使用先前呈现的json将对象添加到脚本的窗口中。然后，在beforeCreate中，我们从添加到窗口的对象中读取数据并将其提交到商店。像这样：

    @{
    IHtmlString myObj = null;
    if(ViewData["SomeObject"] is ContentResult)
        myObj = Html.Raw(((ContentResult)ViewData["SomeObject"]).Content);

    <script type="text/javascript">
    (function(){
        window.obj = JSON.parse(myObj);
    });
    </script>

不过，您可以在应用程序中添加道具并通过道具传递对象，只需在脚本标签中创建vue实例即可。

vue.js如何将数据传递给根元素

1 个答案: