如何利用 Vue 的 `Teleport` 和 `provide`/`inject`，设计一个跨组件的拖拽功能，支持复杂的数据传递？

各位前端的英雄们，大家好！我是今天的主讲人，咱们今天不整虚的，直接开讲Vue里那些能让组件“瞬移”和“心灵感应”的神奇技巧，也就是Teleport和provide/inject，再把它们俩揉一块儿，做个跨组件的拖拽功能，保证让你眼前一亮。

第一部分：Teleport，组件的任意门

首先，咱们说说Teleport。这玩意儿，说白了，就是个传送门。你可能遇到过这种情况：你想在组件内部写个弹窗，结果弹窗的 HTML 结构被组件的 CSS 样式影响，盖不住半透明遮罩层，或者被父元素的overflow: hidden给咔嚓掉了。这时候，Teleport就派上用场了。

Teleport能把组件的 HTML 结构“传送”到 DOM 树的任何地方。比如，你可以直接把它传送到body标签下，这样就能避免各种 CSS 样式冲突。

基本用法

<template>
  <div>
    <button @click="showDialog = true">打开弹窗</button>
    <teleport to="body">
      <div v-if="showDialog" class="dialog">
        <h2>弹窗标题</h2>
        <p>弹窗内容</p>
        <button @click="showDialog = false">关闭</button>
      </div>
    </teleport>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const showDialog = ref(false);

    return {
      showDialog,
    };
  },
};
</script>

<style scoped>
.dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  border: 1px solid black;
  z-index: 1000; /* 保证弹窗在最上层 */
}
</style>

在这个例子中，teleport to="body"就把.dialog这个弹窗组件传送到了body标签下。这样，弹窗就能脱离父组件的 CSS 样式影响，自由自在地显示了。

进阶用法：多个 Teleport

Teleport还能传送多个组件。比如，你想把多个组件都传送到body标签下，可以这样做：

<template>
  <div>
    <teleport to="body">
      <div v-if="showDialog1" class="dialog">
        <h2>弹窗1</h2>
        <p>内容1</p>
      </div>
    </teleport>
    <teleport to="body">
      <div v-if="showDialog2" class="dialog">
        <h2>弹窗2</h2>
        <p>内容2</p>
      </div>
    </teleport>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const showDialog1 = ref(true);
    const showDialog2 = ref(true);

    return {
      showDialog1,
      showDialog2,
    };
  },
};
</script>

注意，如果多个Teleport都传送到同一个目标位置，Vue 会按照它们在组件树中的顺序，把它们的内容合并到目标位置。

第二部分：Provide/Inject，组件的心灵感应

接下来，咱们说说provide/inject。这玩意儿，就像组件之间的心灵感应。父组件可以通过provide提供一些数据，子组件可以通过inject获取这些数据，而不用一层一层地通过props传递。

基本用法

// 父组件
<template>
  <div>
    <ChildComponent />
  </div>
</template>

<script>
import { provide } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  setup() {
    const message = 'Hello from parent!';

    provide('message', message); // 提供数据

    return {};
  },
};
</script>

// 子组件 (ChildComponent.vue)
<template>
  <div>
    <p>{{ injectedMessage }}</p>
  </div>
</template>

<script>
import { inject } from 'vue';

export default {
  setup() {
    const injectedMessage = inject('message'); // 注入数据

    return {
      injectedMessage,
    };
  },
};
</script>

在这个例子中，父组件通过provide('message', message)提供了一个名为message的数据，子组件通过inject('message')获取了这个数据。这样，子组件就能直接访问父组件的数据，而不用通过props传递。

进阶用法：使用 Symbol 作为 Key

为了避免命名冲突，可以使用 Symbol 作为provide和inject的 key。

// 父组件
<template>
  <div>
    <ChildComponent />
  </div>
</template>

<script>
import { provide, ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const messageKey = Symbol('message'); // 创建一个 Symbol

export default {
  components: {
    ChildComponent,
  },
  setup() {
    const message = ref('Hello from parent!');

    provide(messageKey, message); // 提供数据，使用 Symbol 作为 key

    return {};
  },
};
</script>

// 子组件 (ChildComponent.vue)
<template>
  <div>
    <p>{{ injectedMessage }}</p>
    <button @click="updateMessage">修改父组件的值</button>
  </div>
</template>

<script>
import { inject } from 'vue';
import { ref } from 'vue';

const messageKey = Symbol('message'); // 创建一个 Symbol

export default {
  setup() {
    const injectedMessage = inject(messageKey); // 注入数据，使用 Symbol 作为 key

    const updateMessage = () => {
      injectedMessage.value = 'Message updated by child!';
    };

    return {
      injectedMessage,
      updateMessage
    };
  },
};
</script>

使用 Symbol 作为 key，可以保证provide和inject的 key 的唯一性，避免命名冲突。 另外这里 message 使用了 ref 包裹，可以让子组件修改父组件的状态。

使用默认值

如果inject找不到对应的provide，可以提供一个默认值。

// 子组件
<script>
import { inject } from 'vue';

export default {
  setup() {
    const injectedMessage = inject('message', 'Default message'); // 提供默认值

    return {
      injectedMessage,
    };
  },
};
</script>

第三部分：Teleport + Provide/Inject，打造跨组件拖拽

现在，咱们把Teleport和provide/inject结合起来，打造一个跨组件的拖拽功能。

需求分析

假设我们有以下需求：

1. 有一个“拖拽源”组件，可以拖拽一个元素。
2. 有一个“拖拽目标”组件，可以接收拖拽的元素。
3. 拖拽的元素可以跨组件甚至跨页面拖拽。
4. 拖拽过程中，需要传递一些数据，比如拖拽元素的 ID、类型等。

实现思路

1. 使用Teleport把拖拽的元素传送到body标签下，这样就能实现跨组件拖拽。
2. 使用provide/inject在拖拽源组件和拖拽目标组件之间共享拖拽状态和数据。
3. 监听拖拽事件，更新拖拽状态和数据。

代码实现

// DraggableSource.vue (拖拽源组件)
<template>
  <div class="draggable-source" @mousedown="startDrag" @mouseup="endDrag" @mousemove="onMouseMove">
    <div class="draggable-item" :style="{ left: x + 'px', top: y + 'px' }">
      Drag Me!
    </div>
  </div>
</template>

<script>
import { ref, provide } from 'vue';

const dragKey = Symbol('drag');

export default {
  setup() {
    const isDragging = ref(false);
    const x = ref(0);
    const y = ref(0);
    const startX = ref(0);
    const startY = ref(0);
    const itemId = 'item-123'; // 假设每个拖拽元素都有一个 ID
    const itemType = 'text';     // 假设每个拖拽元素都有一个类型

    const dragData = ref({
      itemId: itemId,
      itemType: itemType,
      x: x, // 这里传递 ref 对象，方便 Target 组件实时获取位置
      y: y,
      isDragging: isDragging
    });

    provide(dragKey, dragData);

    const startDrag = (event) => {
      isDragging.value = true;
      startX.value = event.clientX - x.value;
      startY.value = event.clientY - y.value;
    };

    const endDrag = () => {
      isDragging.value = false;
    };

    const onMouseMove = (event) => {
      if (isDragging.value) {
        x.value = event.clientX - startX.value;
        y.value = event.clientY - startY.value;
      }
    };

    return {
      x,
      y,
      startDrag,
      endDrag,
      onMouseMove,
    };
  },
};
</script>

<style scoped>
.draggable-source {
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
  position: relative;
  cursor: grab;
}

.draggable-item {
  position: absolute;
  width: 100px;
  height: 50px;
  background-color: lightblue;
  border: 1px solid blue;
  cursor: grabbing;
}
</style>

// DragTarget.vue (拖拽目标组件)
<template>
  <div class="drag-target">
    <p>Drag Target</p>
    <p v-if="dragData && dragData.isDragging.value">
      Item ID: {{ dragData.itemId }}<br>
      Item Type: {{ dragData.itemType }}<br>
      Item X: {{ dragData.x.value }}<br>
      Item Y: {{ dragData.y.value }}
    </p>
    <p v-else>
      No item being dragged.
    </p>
  </div>
</template>

<script>
import { inject } from 'vue';

const dragKey = Symbol('drag');

export default {
  setup() {
    const dragData = inject(dragKey, null); // 注入拖拽数据

    return {
      dragData,
    };
  },
};
</script>

<style scoped>
.drag-target {
  width: 300px;
  height: 200px;
  border: 1px dashed green;
  margin-top: 20px;
  padding: 10px;
}
</style>

// App.vue (父组件)
<template>
  <div>
    <DraggableSource />
    <DragTarget />
  </div>
  <teleport to="body">
    <div class="teleported-item" v-if="dragData && dragData.isDragging.value" :style="{ left: dragData.x.value + 'px', top: dragData.y.value + 'px' }">
      Teleported Drag Me!
    </div>
  </teleport>
</template>

<script>
import DraggableSource from './components/DraggableSource.vue';
import DragTarget from './components/DragTarget.vue';
import { inject } from 'vue';

const dragKey = Symbol('drag');

export default {
  components: {
    DraggableSource,
    DragTarget,
  },
  setup() {
    const dragData = inject(dragKey, null);

    return {
      dragData
    }
  }
};
</script>

<style>
.teleported-item {
  position: absolute;
  width: 100px;
  height: 50px;
  background-color: rgba(255, 0, 0, 0.5);
  border: 1px solid red;
  pointer-events: none; /* 避免遮挡鼠标事件 */
  z-index: 9999; /* 确保在最上层 */
}
</style>

代码解释

1. DraggableSource.vue：

   • provide(dragKey, dragData): 这里使用 provide 提供了一个 dragData 对象，包含了拖拽元素的相关信息，例如 ID, Type, x, y 坐标以及是否正在拖拽状态。 使用了 ref 来包裹状态，这样才能在其他组件中响应式地获取和修改这些值。
   • startDrag, endDrag, onMouseMove: 这些函数处理拖拽的开始、结束和移动事件，并更新拖拽元素的位置(x 和 y)。

2. DragTarget.vue：

   • inject(dragKey, null): 使用 inject 来获取 DraggableSource 组件提供的 dragData。 如果 dragData 不存在，则提供 null 作为默认值。
   • 模板部分： 根据 dragData.isDragging.value 的值来显示不同的信息。 当正在拖拽时，会显示拖拽元素的 ID、Type 和坐标。

3. App.vue：

   • teleport to="body": 将拖拽元素传送到了 body 标签下，实现了跨组件的拖拽效果。 拖拽元素的样式通过 .teleported-item 类来定义。
     • inject(dragKey, null): 获取拖拽的状态,控制 teleported-item 的显示和位置。

代码运行效果

运行这段代码，你会发现：

1. 你可以拖拽“DraggableSource”组件中的元素。
2. 拖拽的元素会出现在屏幕的任何位置，不会被父组件的 CSS 样式影响。
3. “DragTarget”组件会显示拖拽元素的 ID、类型和坐标。

代码优化

1. 更灵活的拖拽数据：可以把dragData改成一个对象，包含更多信息，比如拖拽元素的样式、数据等。
2. 拖拽目标高亮显示：当拖拽元素进入拖拽目标区域时，可以高亮显示拖拽目标，提示用户可以释放拖拽元素。
3. 拖拽结束后的处理：可以在拖拽结束后，执行一些操作，比如把拖拽元素添加到拖拽目标中，或者更新数据。
4. TypeScript 支持：使用 TypeScript 可以更好地类型检查和代码提示。

总结

通过Teleport和provide/inject的结合使用，我们可以轻松地实现跨组件的拖拽功能，并且可以传递复杂的数据。这种方法不仅代码简洁，而且易于维护。希望今天的分享能帮助大家更好地理解和应用Vue的这些高级特性。

总结表格

技术点	作用	优势	缺点
Teleport	将组件的 HTML 结构传送到 DOM 树的任何位置。	避免 CSS 样式冲突，实现跨组件拖拽等特殊效果。	需要注意传送的目标位置，避免出现意外的布局问题。
provide	在父组件中提供数据。	避免逐层传递 props，简化组件之间的通信。	需要注意命名冲突，建议使用 Symbol 作为 key。
inject	在子组件中获取父组件提供的数据。	方便子组件访问父组件的数据，实现组件之间的共享状态。	依赖于父组件的 provide，如果父组件没有提供数据，可能会导致错误。
Teleport + Provide/Inject	结合使用，实现跨组件的数据共享和操作。	可以构建复杂的组件交互，例如跨组件拖拽、全局状态管理等。	需要仔细设计数据结构和通信方式，避免出现循环依赖或数据不一致的问题。

希望这个讲座能帮助你理解如何在 Vue 中使用 Teleport 和 provide/inject 构建复杂的组件交互功能。 祝各位英雄们早日掌握这项技术，在前端战场上披荆斩棘，所向披靡！