点击在某处生成自定义组件

我有一个需求,想要在点击一个按钮后,在某处的divbox中插入一个自定义组件card,因为divbox有很多个,我每次点击按序插入card。我在查阅了一些资料后,也没有很好的解决办法,v-if的方法不太满足我这个需求(实在不行我暂时也只能用这个方法了),clonenode又不能复制组件绑定的方法。我使用的是vue3 setup语法糖,可能是我对vue api了解不够,目前还没有找到比较好的方法,有人可以帮助我吗。

也许动态组件可以满足你的需求。

好吧,其实不太懂你的需求。

动态组件确实可以满足我的需求 :rofl:,感谢您的回复!
我的需求是点击按钮以后卡片会以动画的形式移动并覆盖在某个卡片容器上,然后再销毁这个卡片,重新在卡片容器上创建一个新的卡片(因为之前的卡片是用相对定位移动过去的,并不真正在卡片容器里)。但其实只要用动态组件切换就行了。


我想再请问下,有没有能够直接动态插入一个自定义组件的方法,还是必须要有一个像动态组件的占位符去切换展示它,我好像很难去获取到一个全新的自定义组件dom去插入它,也或许是我想偏了 :crazy_face:

vue3 新出的 teleport 传送门,移动dom的。可以在网页根document 里面放一个div ,然后把vue的组件传送过去。其实也可以传送到任意dom,只要可以被渲染出来,且有ID。

或者异步组件。好吧,还是不太清楚你的需求。
其实还有一个组件 defineCustomElement,动态用代码创建的。这个我也不太会,官网介绍用点简单。

defineAsyncComponent:

defineCustomElement:

对了,需要注意一下开发环境和生产环境,有可能打包后,效果就不一样了。

我去研究一下,非常感谢!

我想defineCustomElement能很好的满足我的想法,我就是想要获取一个已有组件的构造器,可以直接new一个全新的组件实例出来,然后用像appendchild的方法插入某个dom中。但这个方法需要重新手动配置一个新组件,而不能用现有的组件属性,实验了一下发现好像没有将现有组件配置注入的方法,我可能还需要学习一下…

vue3 新出的 teleport 传送门,移动dom的,看了没?

可以用 pinia 传递配置呀。

看了,我是想复制一个新的组件,用teleport传送过去的话原来的就没有了,这个需求我是想既保留原来的又创个新的组件。不过这个teleport内置组件还蛮有用的,我以后应该会用着 :rofl:

你弄两个一样的,一个传送走,一个留下来,不就可以了吗?

那我想点击一下,就弄两个一样的,然后一个传送到某个位置(每次点击传送位置不固定),这个具体要怎么实现呢。我暂时没有想到比较好的方法,如果能拿到那个组件的构造器应该能比较方便实现(因为这个组件绑定了比较多的方法),我对传值这方面还不是特别熟练,所以我还在研究您跟我说的definecustomelement这个方法。

内置组件 | Vue.js 动态组件component is能否解决您的问题?

相比于动态创建组件实例,动态组件确实能更方便的解决我的问题,我已经更改了我的思路,现在问题已经解决了 :grin:

或者异步组件。好吧,还是不太清楚你的需求。.

就是去动态的挂载一个已经定义好的单文件组件,挂载的位置是一个网格布局的九宫格,我之前可能没讲清楚。