VueJs 3 - Используйте связанный sfc в сочетании с рендерингом на стороне клиента

Привет

Здравствуйте товарищи вьюеры!

Итак, у меня следующая ситуация:

Я использую ASP.Net Core 3.1 в качестве своего сервера, и я хотел бы использовать настройку Vue SFC, включая поддержку Typescript, и связать полученные компоненты с моим .cshtml< /сильный>.

Пример использования

Пример.vue

<template>
    <label :for="name">{{ content }}</label>
    <input :id="name" :placeholder="content"/>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
     someCode
}),
</script>

<style scoped>
    /*some styling*/
</style>

Index.cshtml.cs

public class IndexModel: PageModel{
    public string Name { get; set; }
    public string Content { get; set; }
}

Индекс.cshtml

@page
@model Namespace.To.IndexModel
<example :name="@Model.Name" :content="@Model.Content" />

Вопрос

Есть ли способ связать компоненты одного файла, а затем использовать компоненты по мере необходимости внутри .(cs)html< /сильный>?

Предпочтительно, чтобы каждый компонент находился внутри собственного файла .js, чтобы загружать их по требованию, но это не обязательно.

Заранее спасибо


javascript c# vue.js asp.net-core vuejs3
person WhatzGames    schedule 13.10.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Это возможно. Но чтобы уточнить, похоже, вы хотите использовать компоненты по отдельности. Это означает, что то, что вы называете SFC/компонентом, должно рассматриваться как отдельное приложение Vue.

Предполагая, что это так, вместо того, чтобы собирать компоненты по отдельности, вам нужно будет создать приложение vue для каждого из них и экспортировать их по отдельности.

Вам нужно будет решить, как и когда их монтировать. Я полагался на более ручной способ монтирования, который требует строки js, чтобы связать элемент DOM с виджетом и передать атрибуты. В качестве альтернативы вы можете полагаться только на тег DOM. Следует признать, что способ js немного более многословен, но менее подвержен пограничным случаям.

Вот пример для js

components/example/index.js:

import Example from './Example.vue';

export const mountExample = (el, props) =>
  Vue.createApp(el, props);

Затем компонент будет заключен в функцию, которая позволит вам передать элемент DOM для использования и свойства.

Вам понадобится

<script src="vue.js"/><!-- if it's not bundled in there -->
<script src="example.js"/>
<div id="example" />
<script>
  mountExample('#example', {name:"@Model.Name", content="@Model.Content});
</script>

Другой способ (без создания экземпляра js) состоял бы в том, чтобы обернуть его в функцию (IIFE), которая ищет теги <example>, анализирует содержимое, а затем монтирует приложение с предоставленными параметрами. Это немного больше работы, чем в другом примере, но не должно быть ужасно сложным.

Итак, для примера примера я бы организовал его примерно так: example

/components/example/
|-- Example.vue
|-- index.js

а затем используйте цепочку веб-пакетов через vue.config.js, чтобы сделать несколько из этих

module.exports = {
  // tweak internal webpack configuration.
  // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  chainWebpack: config => {
    // remove the standard entry point
    config.entryPoints.delete('app')

    // then add your own
    config.entry('example')
      .add('./src/components/example/index.js')
      .end()
    .entry('menu')
      .add('./src/components/menu/index.js')
      .end()
  }
}

Предостережение; Я использовал накопительный пакет для их создания и не проверял это, но веб-пакет тоже должен работать.

ресурсы для конфигурации webpack:

person Daniel    schedule 13.10.2020