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

【问题标题】：vuejs loading entire .vue file dynamically from 1 template into anothervuejs 将整个 .vue 文件从一个模板动态加载到另一个模板中
【发布时间】：2019-11-18 02:44:01
【问题描述】：

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

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'，这确实有效，但我最终会为两个不同的调用提供一个表单实例，而不是每次调用一个动态表单。因此，两种形式中的一种被加载并在两个调用中重用。

我尝试使用 const 变量而不是 Vue.component 变量，它在加载到 const 变量的主 vue 页面上本地正常工作，但我无法让子页面加载常量值

//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 页面加载表单。

这似乎微不足道，不太清楚我为什么要为此苦苦挣扎。

【问题讨论】：

对不起，我很难理解你的问题，你有两个 vue 组件需要共享同一个 vue 表单吗？
基本上我有一个整体模板来组成一个表单，我希望使用使用主表单模板的替代 .vue 文件，而标题等似乎都是动态加载的，实际表单内容位于另一个.vue 文件，如果有任何意义，我希望将每个表单制作者的 .vue 文件传递到主表单模板中
我认为你想要实现的就是@bodo 在他的回答中提到的。
谢谢大家和@bodo - 我看到了插槽，但在下面的例子中挣扎应该可以帮助我到达那里。

标签： vue.js

【解决方案1】：

你不能通过 prop 将一个组件传递给另一个组件。为此，您需要使用插槽。所以你的代码看起来像：

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

在<dynamic-form> 组件中，你会写：

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

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

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

【讨论】：