在Blazor中显示可重用的VueJS图表组件
我想像教程中的可重用组件一样使用图表 图表组件应接受一些输入参数并显示VueJS呈现的图表。Blazor不允许在*.razor文件中添加脚本标记,所以我改用*.cshtml /Pages/Index.razor-主页面在Blazor中显示可重用的VueJS图表组件,blazor,asp.net-blazor,Blazor,Asp.net Blazor,我想像教程中的可重用组件一样使用图表 图表组件应接受一些输入参数并显示VueJS呈现的图表。Blazor不允许在*.razor文件中添加脚本标记,所以我改用*.cshtml /Pages/Index.razor-主页面 @page "/" <ChartComponent></ChartComponent> 问题 如果我将JS放入Host.cshtml中,一切都会正常工作,但当我试图将其作为一个单独的cshtml组件时,主页会抱怨没有定义ChartComponent。C
@page "/"
<ChartComponent></ChartComponent>
问题
如果我将JS放入Host.cshtml中,一切都会正常工作,但当我试图将其作为一个单独的cshtml组件时,主页会抱怨没有定义ChartComponent。CSHTML可以是一个组件,还是我需要将其作为老式MVC部分包含?您的组件中不能包含脚本,如果您使用Blazor WASM,它们应该从_Host.CSHTML或index.html中的单独文件加载。并在应用程序启动之前加载
VueJS脚本使用新的HTML标记创建Web组件。我在索引页上使用这个标签。如果我将所有脚本放在Host.cshtml中,主机会在索引页之前加载JS,而JS无法找到并初始化,因此不会呈现Web组件。有没有一种方法可以将HTML和JS保持在一起而不在Host.cshtml和Index.razor之间分割?基本上,我需要确保每次进入特定页面时都执行JS脚本。使用JSInterop在组件OnInitializedAsync上启动脚本,或者在AfterRenderAsync上启动脚本,我不确定它是否可以在OnInitializedAsync上运行
<div id="charts" style="width: 300px; height: 300px; border: 1px solid red;">
<chart-control :data="bars"></chart-control>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="~/scripts/vue-charts/library/trading-vue.js"></script>
<script>
window.bars = {
ohlcv: [
[1551128400000, 33, 37.1, 14, 14, 196],
[1551132000000, 13.7, 30, 6.6, 30, 206],
[1551135600000, 29.9, 33, 21.3, 21.8, 74],
[1551139200000, 21.7, 25.9, 18, 24, 140],
[1551142800000, 24.1, 24.1, 24, 24.1, 29],
]
};
window.onload = function () {
var vm = new Vue({
el: '#charts',
components: { 'chart-control': window.TradingVueLib.TradingVue }
});
};
</script>
@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.JSInterop
@using Charts
@using Charts.Shared