Question

很抱歉，如果这是重复的话-我四处看看，今天大部分时间都在这个问题上，但没有得到我想要的结果。

https://github.com/vahidhedayati/micronaut-vuejs-cqrs/blob/master/frontend/src/components/sample/dynamicForm/PropertySplit.vue#L29

https://github.com/vahidhedayati/micronaut-vuejs-cqrs/blob/master/frontend/src/components/sample/dynamicForm2/Property2.vue#L31

我有两个类似的vue父页面，它们加载动态表单内容，我想做的是获取实际的表单内容，该内容位于上述每个子文件夹中完全不同的.vue文件中。

如果我使用Vue.component('form-content'确实可以，但是最后我得到了两个不同调用的1个表单实例，而不是每个调用一个动态表单。因此，两种形式之一被加载并在两个调用中都可以重复使用。

我尝试使用const变量而不是Vue.component，该变量在加载const变量的主Vue页面上可以在本地正常工作，但是我无法获得子页面以加载const值

//import Vue from 'vue'
//Vue.component('form-content', {
//   components: { ActualForm },
//    template: `<actual-form></actual-form>`
//});

//const content = {
//  components: { ActualForm },
//  template: `<actual-form></actual-form>`
//}

ActualForm.vue是另一个页面，理想情况下，我希望能够将每个页面上的每次调用都传递给底层的DynamicForm.vue，后者将加载标题等，然后按照传入的vue页面的形式进行加载。 / p>

似乎不太确定我为什么要为此苦苦挣扎。

Answer 1

您不能通过道具将一个组件传递给另一个组件。为此，您需要使用一个插槽。因此您的代码如下所示：

<dynamic-form
  :headingText="currentHeadingText"
  :sectionHeadingText="currentSectionHeadingText"
>
  <actual-form/>
</dynamic-form>

然后在<dynamic-form>组件中编写：

<template>
  […]
  <slot></slot>
  […]
</template

然后，<actual-form>组件将包含在<slot>标签的位置。您还可以使用多个插槽并传入多个组件/模板段。（有关详细信息，请阅读vuejs.org上的文档）

我不确定您要做什么。也许您需要以其他方式构建应用程序。例如。在<dynamic-form>的模板中使用<actual-form>。然后，您仍然可以将道具传递到<dynamic-form>并从<actual-form>填充插槽。

vuejs将整个.vue文件从一个模板动态加载到另一个模板

1 个答案: