admin 管理员组

文章数量: 887021


2024年1月5日发(作者：sql教程资料pdf)

vue 调用组件内的方法

Vue调用组件内的方法

一、什么是组件

组件是一个可复用的Vue实例，它封装了模板、数据、方法、生命周期和其它自定义选项，可以把它们组合起来创建更复杂的页面或功能。

二、Vue调用组件内的方法

1、通过ref属性调用

给要调用的组件加上一个 ref 属性，然后在js里通过

this.$me 来获取到这个组件的实例，可以调用组件实例里的数据和方法。

2、通过$children属性调用

当组件以孩子的形式组合在一起时，可以通过

this.$parent.$children 来获取指定的组件实例，然后调用它的方法。

3、通过$emit和$on调用

每一个 Vue 实例都实现了事件总线，可以通过父子组件的事件来调用组件内的方法，只需在要调用组件内的方法的组件内用$emit来发射事件，在要被调用的组件内用$on来接收事件，在接收到事件后就可以调用组件内的方法了。

三、调用组件内方法的实例

以下实例讲解了通过$emit和$on来调用组件内方法：

- 1 -

以上代码中，组件A在created钩子里发出一个go事件，组件B在created钩子里接收go事件，接收到go事件后调用组件B内的say方法。如果想调用组件A内的do方法，那就需要在主组件里通过 $2 获取到组件B实例，然后调用组件B实例里的 do 方法。

- 3 -

- 4 -


本文标签： 组件 调用 方法 实例

版权声明：本文标题：vue 调用组件内的方法 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/free/1704462411h460769.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。