跨组件交互问题
问题描述:
当A,B组件 把
VueDraggableNext
都封装到其内部的时候,让A,B组件可以交互,比如把A中的数据元素拖动到B组件中,但是如果按照 每个组件都分别引用VueDraggableNext
那么 A,B 组件之间分辨是两个实例,他们之间变不能交互。
解决方案:
把
VueDraggableNext
组件作为一个全局引用,A,B组件共同应用这个组件的,那么就是一个组件实例。
在vue3 中
ts
//main.ts
import { VueDraggableNext } from 'vue-draggable-next'
const app = createApp(App)
app.provide('VueDraggableNext', VueDraggableNext)
ts
// A组件
const VueDraggableNext = inject('VueDraggableNext')
ts
// B组件
const VueDraggableNext = inject('VueDraggableNext')
这样就可以两个组件之间进行交互。
clone模式问题
问题描述
list 中的数据是个多层嵌套的对象,每次把list中的对象拖动新的组件数组中,并没有clone对象,而是引用原对象,不然拖拽第二个组件将会和第一个组件一模一样,改变第一个组件第二个、第三个也会跟着变动。解决方案是使用
clone
属性函数中拦截clone数据,让其创建新对象。
TS
<template>
<VueDraggableNext
:group="{ name:'ComponentList', pull:'clone', put:true }"
:list="list"
:force-fallback="true"
:fallback-class="true"
:fallback-on-body="false"
item-key="id"
@clone='cloneA' // 这里获取的是个原生对象相关的
// 这里是获取的list中的某一项,拦截处理数据后会被拖动到另一个List
:clone="(el:any) => {
const clone = deepClone(el)
return clone
}"
:animation="500"
>
<div v-for="(item,index) in list" :key="index"></div>
</VueDraggableNext>
</template>