问题标签 [vue-dynamic-components]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
64 浏览

javascript - 在 Vue js 中渲染动态组件需要帮助

您好,我有以下情况。我有父组件(健康档案),其中列出了每个子组件上的添加按钮。我想让应用程序这样当用户单击添加按钮时,只有该特定组件的表单打开,其余部分关闭,反之亦然。我无法使用v-bind:is 因为按钮位于子组件中,并且它将数据发送到父组件。任何帮助将不胜感激。附上 健康档案组件的屏幕截图,每个子组件都有触发 emmit 数据类型的按钮

0 投票
1 回答
59 浏览

vue.js - 如何在 Vue.js 中的动态组件上使用组件特定属性?

我有两个使用 component 元素展示的动态组件。

其中一个组件需要道具资源,而另一个则发出自定义事件resourceAdded。一切正常,除了我收到错误消息“Extraneous non-emits event...”和“Extraneous non-emits props...”,我理解这是因为它也在尝试传递道具并从组件发出自定义事件没有指定道具或发射。我怎样才能解决这个问题而不必在两个组件中指定发射和道具?或者这只是这样做的方法吗?

FIRST COMPONENT - 只发射

第二个组件 - 只需要道具

0 投票
1 回答
565 浏览

vue.js - 组件动态导入在 router.js 中不起作用

使用 Nuxt.js,router.js我正在尝试导入我的路由组件:

我收到此错误:

组件中未定义的渲染函数或模板:匿名

我遇到了别人的 Nuxt.js 项目,他们在最后添加了以下内容,并且它可以工作:

我的返回对象import()如下所示:

在此处输入图像描述

在另一个 Vue.js 非 Nuxt 项目中,类似的情况import()如下所示:

在此处输入图像描述

在这两种情况下,组件都嵌套在某个“默认”对象中。但是对于 Nuxt.js,您似乎必须显式导入该对象,而对于常规 Vue.js,您不必指定它。

为什么?

0 投票
0 回答
79 浏览

vue.js - vue动态组件触发动画

描述

在我插入的项目中,大部分操作都是通过图标执行的。因此,我创建了一个组件,其中包含按钮的基本组件并动态导入图标,因为它是通过道具传递的。

我面临的问题是为图标设置动画。

我有一个图标,其目的是在播放/暂停之间进行切换,预期结果如下(不介意条的位置,我仍在处理动画)

但是,通过该middleware组件调用图标时,并没有执行动画,因为组件在 isPausedprop 的 toggle 时一直在渲染。

我已经尝试过使用keep-live,虽然它不渲染,但动画不运行。

我做错了什么还是有更好的选择?

代码

调用组件midleware

零件midleware

结果

我想要的是

在此处输入图像描述

我现在拥有的

在此处输入图像描述

我现在拥有的 - 与keep-live

在此处输入图像描述

0 投票
1 回答
169 浏览

vue.js - Vue动态组件模板不适用于承诺

参考:

https://medium.com/scrumpy/dynamic-component-templates-with-vue-js-d9236ab183bb

Vue js 动态导入组件

控制台抛出错误“this.loader() 不是函数”或“this.loader().then”不是函数。

0 投票
2 回答
2054 浏览

javascript - Vue js 用 html 内容渲染文本

我想要做的是有一个根元素,其中包含一个包含内部 html 的道具,例如:hello<b>hey</b> 但我不能使用 v-html,因为这个元素也有子元素,例如:

我已经尝试过上述方法,并且尝试过使用插槽。我可以用 vanilla JavaScript like 解决它element.innerText,但我不想这样做。主要目标是当他们键入时元素是可编辑的,他们正在编辑将被呈现的 element.content,其中的 div 是我也需要的普通 HTML。主要问题是我想要的内部 HTML 没有根元素。该元素类似于:

我希望最终结果是:

而且我想hello<b>hey</b>在单击内部时进行编辑,我不希望它包裹在其他任何东西中,如果我将 v-html 放在外部 div 上,内部 div 就消失了。

0 投票
0 回答
105 浏览

vuejs3 - 如何在 vue3 中访问 slot 动态组件?

我不知道如何访问<slot/>动态加载的组件。

在上述情况下,this.$slots.default()[0]将是一个对象,它不包含动态组件,只是一个AsyncComponentWrapper

0 投票
1 回答
92 浏览

nuxt.js - 变异 Nuxt 组件

我已经尝试学习 vuex 好几个星期了(我看过几十个教程,他们只是通过反例来学习)。我很慢,仍然无法掌握如何做到这一点。
我的想法是能够在组件之间切换选项卡。我知道我应该使用一个动作来激活突变(我无法做到)但是我认为突变应该仍然可以在按下按钮时起作用?

我的问题是如何正确设置在单击按钮时传递组件值的突变?
另外我想知道我的组件切换想法是否会起作用,或者是否有更好的方法来做到这一点。

SignUp.vue

store/index.js

SeperateComponent.vue

0 投票
1 回答
134 浏览

angular - Angular 中是否有与 Vue.js keep-alive 和组件等价的东西?

我正在学习 Vue.js,并尝试了keep-alive允许component在组件之间动态切换的机制。据我了解,我可以做这样的事情:

上面的代码将根据单击的按钮显示组件,同时确保未显示的组件保持活动状态,保持其内部状态SectionASectionB

在 Angular 中,我必须执行以下操作:

我想如果我想保持组件的内部状态,我应该使用以下内容:

有没有更好的方法在 Angular 中实现 Vue.js 行为?

0 投票
1 回答
167 浏览

javascript - Vue3:嵌套路由和动态布局组件

嗨 Vue 爱好者们,我一直在开发一个多租户应用程序,但遇到了动态布局问题。

要求:从公共文件夹加载特定于租户的 layout.vue 文件并环绕<router-view>它。

尝试了一些类似dynamic imports的东西,defineAsyncComponent但无法让它工作。

我在浏览器控制台中收到以下错误: 在此处输入图像描述