Question

我有一个与Vue.js结合在一起的ASP.NET Core MVC项目。我仅使用Vue.js使页面具有反应性。我的目标是基于_layout.cshtml文件中的div创建一个主要的vue实例，然后使用X-Templates创建Vue组件并在我的Web应用程序中使用它们。值得一提的是，我想在自己的.js文件中拥有JS Vue.Component（）逻辑，因为其中某些组件将具有大量的js逻辑。

当我从要使用它们的.cshtml中调用它们时，我遇到的问题是让Vue注册/识别我的组件。我发现这个stackoverflow帖子link展示了实现该工作的逻辑方式，但是他的示例显示了cshtml内的JS逻辑，这是我要避免的事情，并且没有如何调用该示例的示例。另一个页面中的vue组件。

我得到的错误是... [Vue警告]无法安装组件：模板或渲染功能未定义

技术栈：

ASP.NET Core MVC（2.2）
Vue.js（2.6.10）
Vue-template-compiler（2.6.10）
Vue-loader（15.7.0）<-不知道我是否需要这个。
Axios（0.18.0）
Babel / Core（7.4.4）
Babel / polyfill（7.0.0）<---我的UI必须在IE11中工作，并且我在JS中使用了异步函数
WebPack（4.26.0）

这是我的主要_layout.cshtml

    <div id="main-app">
     @RenderBody() 
    </div> 
@section Scripts {
    <script src="@Url.Content("~/js/mainVueApp.js")"></script>

}

这是我的mainVueApp.js

 import Vue from 'vue';
    import myComponent from 'testComponent';

        new Vue({
         el: 'main-app',
         components: {
            myComponent 
            // I also tried, thisIsMyComponent: myComponent. No luck with that either.
          }
       });

这是我的_vueTestComponent.csthml

    @model TestViewModel 

        <script type="text/x-template" id="my-test-component-id">
                <div class="card">
                    <div class="card-header"> My Test Header </div>

                    <div class="card-body">
                           <table class="table"> 
                             <thead> 
                                  <tr> 
                                     <th class="pull-right">
                                       Test Header 
                                     </th>
                                  </tr>
                             </thead>

                             <tbody>
                                <tr v-if="isShowRow"> 
                                     <th class="pull-right">
                                       Test Header AGAIN 
                                     </th>

                                     <tr class="pull-right">
                                         @(Html.Kendo.CurrencyTextBoxFor(m => 
                 m.TestProperty).HtmlAttributes(new Dictionary<string, object>{
                                 {"id", "test-text-box"},
                                 {"class", "textbox-input"},
                                 {"v-model", "testTextBoxValue"}
                                 }).Deferred()
                                 )
                                     </tr>
                                  </tr>
                             </tbody>
                           </table>
                     </div>
                </div>
            </script>
@section Scripts {
        <script src="@Url.Content("~/js/testComponent.js")"></script>

    }

这是我的testComponent.js

import Vue from 'vue';
import axios from 'axios';

let testComponent = Vue.Component('my-component', {
    template: 'my-test-component-id',
    data: function() {          
       return {
      testTextBoxValue : 'Test Value',
      isShowRow: true
     }

   },
    methods: {
    // Nothing for now....
 }
});

//I tried it without default, but it doesn't work either :(
export default {
testComponent 
};

这是我调用组件TestViewForVue.cshtml的视图

<div class="row"> 
  <div class="col-12">
      @* Call the Component *@
      @* Do I need to load the .cshtml where this component lives first, as a partial view or something? *@
       <my-component> </my-component>
  </div>
</div>

Answer 1

这会稍微改变您的结构（不使用脚本x-template语法），但是对我有用。如果可以的话，给这个镜头。

由于您想重复使用此组件，因此可以在全局范围内注册它。

在这里使用模板文字，因此需要确保正确地为IE11进行移植

// testComponent.js

Vue.component("my-component", {
  template: `
        <div class="card">
          <div class="card-header"> My Test Header </div>
        </div>
      `,
  data () {
    return {}
  },
  // ...
})

然后在App_Start / BundleConfig.cs中，为您的全局组件创建一个包，然后在_layout.cshtml渲染脚本上渲染该包。

// BundleConfig.cs

public static void RegisterBundles(BundleCollection bundles)
{
  bundles.Add(new ScriptBundle("~/bundles/vuecomponents").Include(
    "~/Scripts/VueComponents/testComponent.js"
  ));
}

// _layout.cshtml

@Scripts.Render("~/bundles/vuecomponents")

现在，您应该可以在应用程序的任何.cshtml页面中加入<my-component />。

如何在我的.cshtml页面中调用Vue组件？

1 个答案: