如何在我的.cshtml页面中调用Vue组件？
我有一个ASP.NET Core项目与Vue.js一起。我只使用Vue.js使我的页面具有反应性。我的目标是基于_layout.cshtml文件中的div创建一个主vue实例，然后使用X模板创建Vue组件，并在我的web应用程序中使用它们。值得一提的是，我希望将JS Vue.Component()逻辑放在它自己的.js文件中，因为其中一些组件将有大量的js逻辑。
我遇到的问题是，当我从.cshtml调用要使用的组件时，如何让Vue注册/识别它们。我发现了这个堆栈溢出帖子link，它展示了如何使这个逻辑工作，但是他的例子显示了cshtml中的JS逻辑，这是我正在试图避免的，并且没有关于如何从另一个页面调用vue组件的例子。
我所犯的错误是..。Vue警告未能挂载组件:模板或呈现函数未定义
技术人员：
- ASP.NET核心MVC (2.2)
- Vue.js (2.6.10)
- Vue-模板-编译器(2.6.10)
- Vue-加载程序(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>回答 1
Stack Overflow用户
发布于 2019-07-02 15:23:17
这会稍微改变您的结构(不使用脚本x模板语法)，但它对我有效。如果可以的话就试一试。
因为您希望重用这个组件，所以在您的情况下可以在全局注册它。
在这里使用模板文字，因此需要确保正确地为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")现在，您应该能够在应用程序中的任何<my-component />页面中包含.cshtml。
https://stackoverflow.com/questions/56294907
复制相似问题
腾讯云开发者
