我需要根据用户交互将子组件动态添加到组件中.我看了大约old issue个,但对我来说,这似乎是一个肮脏的黑客,此外,这是一个老问题,而且vue开发非常活跃,所以我不知道现在是否有更好的方法.

到目前为止,我try 的是this fiddle ,但显然不起作用,它说$mount只能被调用一次.我不知道如何动态添加其他元素,但我也不知道如何动态添加其他元素.

那么,如何在客户端单击或其他客户端事件上添加组件呢?

推荐答案

您希望从一开始就将自定义组件放在那里,并使用v-ifv-for来显示、隐藏、添加或减go 这些组件.让数据驱动DOM,而不是自己管理DOM.小提琴示例:https://jsfiddle.net/f5n5z5oo/2/

您甚至可以让组件动态更改它们使用的组件类型:

data: {
  elements: [
    { type: 'component-a' },
    { type: 'component-b' }
  ]
}
<div v-for="element in elements" :is="element.type"></div>

如果你对你的用例更具体,我会尽力进一步帮助你!

Vue.js相关问答推荐

无法解析组件:google—pay—button

通过另一个文件调用模块化窗口组件

Vue.js 3 没有组件的实例?

Vuetify 3 - NavBar 组件占据整个视口高度

Vuetify 扩展面板,面板标题左侧带有图标

有没有办法初始化一个保留初始 HTML 的 Vue 对象

Webpack 编译错误:TypeError: __WEBPACK_IMPORTED_MODULE_1__ … is not a function

Vue:在表格中显示嵌套数据

Vue动态mapGetters

Object.assign 没有正确复制

可以同时使用 Tailwind css 和 Bootstrap 4 吗?

当前端和后端位于虚拟 docker 网络中时,如何使用 axios 寻址后端主机

Vue @click 不适用于存在 href 的anchor锚标记

重新加载发布到 Github 页面的 Vue 网站时出现 404

更新 vue.js 中的数据属性/对象

错误 [ERR_UNSUPPORTED_ESM_URL_SCHEME]:默认 ESM 加载器仅支持文件和数据 URL - Vue 3

如何将事件绑定到 Vuetify 中的树视图 node ?

按键删除对象不会更新vue组件

Vue 2 转换不起作用

使用 vue.js 获取调用元素