Vue的Slot中的一个子组件如何变更到另一个子组件中?

Question

我用Vue做了一个拖拽组建间拖拽的东西现在把A组件中的子组件拖拽到B组件中,
我是这样实现的:
CompA.$children.splice(index, 1)
CompB.$children.splice(index, 0, temp) //temp就是A组件中spilce的那个子组件实例

操作后,确实他们的子组件长度一个加一,一个减一.

但是那个temp按理来说应该$parent应该变成了B,但是现在这个temp.$parent还是A,没有真正的变为B中slot的一个子组件.该如何解决?

Answer 1

谢邀

还真不知道改变$parent的方法

我觉得你这个应该是两个子组件之间数据的转换，应该没必要连组件一起转换吧？

Answer 2

用动态组件来解决这个问题

A组件

<Acomponent>
    <div slot="list">
        <component v-for="itemList['A']" :is="itemList['A'].componentName"></component>
    </div>
</Acomponent>

B组件

<Bcomponent>
    <div slot="list">
        <component v-for="itemList['B']" :is="item.componentName"></component>
    </div>
</Bcomponent>

具体拖拽的方法你自己写下 我就举个例子 vue这么写

new Vue({
    data:{
        itemList:{
            A:{}
            B:{}
        }
    },
    methods:{
        //拖拽后执行的方法，来修改itemList 中 A B中包含的组件
        editItem(){
            
        }
    }
})

如果你把组件从A拖拽到B
这样的话 你的$parent 也会由A变成B