Vue.js 是一款前端 JavaScript 框架，它允许我们构建可复用、可扩展和易于维护的 Web 应用程序。在 Vue.js 中使用组件是一种常见的方式，但如何从外部组件调用一个 Vue.js 组件的方法呢？本文将为大家详细介绍这个过程并提供示例代码。
步骤
以下是从外部组件调用一个 Vue.js 组件的方法步骤：
1. 在需要被调用的组件中定义方法
首先，在需要被调用的组件中定义一个方法。例如，我们可以创建一个名为 exampleMethod 的方法来演示如何进行调用：
----------
-----
------- ------------------------------------
------
-----------
--------
------ ------- -
-------- -
--------------- -
-----------------------
-
-
-
---------2. 将组件注册为全局组件
将该组件注册为全局组件，以便其他组件可以使用。在这里，我们将组件注册为名为 example-component 的全局组件：
------ ---------------- ---- ------------------------ ---------------------------------- -----------------
3. 在外部组件中引入被调用组件
在需要调用 exampleMethod 方法的组件中，使用 import 导入 example-component 组件，然后将它添加到模板中：
----------
-----
------------------ ----------------------------------
------- ------------------------------------------
------
-----------
--------
------ ---------------- ---- ------------------------
------ ------- -
----------- -
-------------------- ----------------
--
-------- -
------------------- -
----------------------------------
-
-
-
---------注意：此处我们采用了 $refs 来引用 example-component 中的 exampleMethod 方法。
4. 调用被引用组件的方法
现在，我们可以在外部组件中调用 exampleMethod 方法：
----------------------------------
示例代码
以下是完整的示例代码。文件结构如下：
--- -------
--- ----------
--- --------------------
--- ---------------------ExampleComponent.vue
----------
-----
------- ------------------------------------
------
-----------
--------
------ ------- -
-------- -
--------------- -
-----------------------
-
-
-
---------ExternalComponent.vue
----------
-----
------------------ ----------------------------------
------- ------------------------------------------
------
-----------
--------
------ ---------------- ---- ------------------------
------ ------- -
----------- -
-------------------- ----------------
--
-------- -
------------------- -
----------------------------------
-
-
-
---------App.vue
----------
---- ---------
-----------------------------------------
------
-----------
--------
------ ----------------- ---- ------------------------------------
------ ------- -
----- ------
----------- -
--------------------- -----------------
-
-
---------结论
通过以上步骤，我们可以轻松地从一个外部组件调用一个 Vue.js 组件的方法。这种方式可用于许多应用程序中，例如当我们需要在多个组件之间共享数据时。希望本文对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/14666