问题描述

今天在Vue3项目中, 封装了一个G6组件, 实现右侧有图标, 能拖拽到左侧并且能够连线的需求, 过程中发现右侧图标往左侧容器中拖之后, 左侧容器消失在DOM树中, 让我很是不解, 查资料也没发现有什么问题, 最后还是自己试出来, 才找到了错误

问题原因

我把 ref的命名跟组件的命名用了相同的名字

解决方案

去掉ref或者给ref更改一下名字, 就能解决DOM消失的问题了

总结

在 Vue 3 中，组件名称和 ref 引用不能重名，是因为 Vue 3 在模板和组件实例之间做了一些优化和改进，为了避免产生混淆，限制了组件名称和 ref 引用不能同名。

1. 组件名称限制：在 Vue 3 中，当你声明一个组件时，组件名称就是该组件的标签名称，用于在模板中使用。如果允许组件名称和 ref 引用重名，那么在模板中可能会出现歧义，不清楚是要使用组件还是引用。为了明确区分，Vue 3 限制了组件名称不能和 ref 引用同名。

例如，在 Vue 2 中是允许这样写的：

<template>
  <my-component ref="myComponentRef" />
</template>

但是在 Vue 3 中会报错，需要将其中一个名称改成不同的标识符。

2. ref 引用限制：在 Vue 3 中，ref 是一个特殊的属性用于获取组件或 DOM 元素的引用。当你在模板中使用 ref 属性时，Vue 3 会自动将引用绑定到组件实例或 DOM 元素上，并且可以在组件逻辑中通过 $refs 来访问。由于 ref 是用于引用的，如果和组件名称重名，可能导致引用和组件实例混淆，不利于代码的可读性和维护性。

总的来说，限制组件名称和 ref 引用不能重名是为了保持代码的清晰性、简洁性和可维护性，防止可能的混淆和错误使用。如果需要使用 ref 引用和组件名称相同的标识符，可以将其改成不同的名称，以避免命名冲突。