Vue 组件是 Vue.js 中非常重要的一部分，它可以将一个页面拆分成多个组件，提高代码复用性和维护性。而 v-el 这个内置指令可以让你在组件中访问 DOM 元素，进一步提高组件的灵活性和功能性。
使用方式
v-el 指令允许我们在组件中访问 DOM 节点，并且可以将其绑定到组件实例的属性上，以便在组件中使用。
-- -------------------- ---- -------
----------
---- -----------------
-----------
--------
------ ------- -
--------- -
----- ----- - ---------------------
-- ---- -----
-
-
---------上述例子中，我们在一个 div 元素上添加了 v-el 指令，并将其绑定到一个叫做 myDiv 的属性上。在组件的 mounted 生命周期钩子函数中，我们使用 this.$el.$refs 获取到该元素的引用，并进行后续操作。
使用场景
v-el 指令的应用场景非常广泛。它可以用来获取 DOM 元素的位置、大小、状态等信息，也可以用来操作 DOM，如添加、删除、隐藏、显示等。
下面来看一个实际的例子。假设我们有一个 Modal 组件，要实现一个点击该组件外部时关闭该组件的效果。
-- -------------------- ---- -------
----------
---- ----------------------- -----------------
---- --------------------- -------------
-------------
------
------
-----------
--------
------ ------- -
------ -
------ -
-------- -----
-
--
--------- -
---------------------------------- ---------------------
--
--------------- -
------------------------------------- ---------------------
--
-------- -
--------------------- -
-- --------------------------------- -- ------------- -
------------ - ------
-
-
-
-
---------在上述例子中，我们在 Modal 组件的内容 div 上添加了 v-el 指令，并绑定到了名为 content 的属性上。通过该属性，我们可以获取到该元素的引用，并在 mounted 生命周期钩子函数中添加一个 click 事件监听器，用来判断用户是否在 Modal 组件外点击了一下鼠标。
当用户点击了 Modal 组件外部时，事件触发，并通过 this.$el.contains(event.target) 判断该事件是否发生在 Modal 组件内部。如果不是，我们就将 visible 属性设置为 false，关闭该组件。
总结
v-el 指令是 Vue.js 提供的一个非常实用的功能，可以让我们在组件内访问 DOM 元素，并进行各种操作。通过上述例子，我们可以看到 v-el 的应用场景非常广泛，而且实现起来也非常简单。
使用 v-el 指令可以提高组件的灵活性、功能性和可维护性，为你的项目开发带来便捷和效率，建议在实际项目中加以应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645f5f33968c7c53b016658b