vue怎么调用组件方法-Vue.js-PHP中文网

vue怎么调用组件方法

下次还敢

发布： 2024-05-21 05:40:01

原创

2378人浏览过

在 Vue 中调用组件方法的方法有三种：直接调用、通过事件触发和通过 provide/inject 机制。直接调用使用 $refs 对象，通过事件触发使用 @event="method"，而通过 provide/inject 机制使用 provide() 和 inject()。

vue怎么调用组件方法

如何在 Vue 中调用组件方法

直接调用

要直接调用一个组件方法，请使用 $refs 对象：

// 父组件
<template>
  <ChildComponent ref="child" />
</template>

<script>
  export default {
    methods: {
      callChildMethod() {
        this.$refs.child.childMethod(); // 直接调用子组件中的 childMethod 方法
      }
    }
  }
</script>

登录后复制

通过事件触发

另一种调用组件方法的方法是通过事件触发：

站长俱乐部购物系统

功能介绍：1、模块化的程序设计，使得前台页面设计与程序设计几乎完全分离。在前台页面采用过程调用方法。在修改页面设计时只需要在相应位置调用设计好的过程就可以了。另外，这些过程还提供了不同的调用参数，以实现不同的效果；2、阅读等级功能，可以加密产品，进行收费管理；3、可以完全可视化编辑文章内容，所见即所得；4、无组件上传文件，服务器无需安装任何上传组件，无需支持FSO，即可上传文件。可限制文件上传的类

查看详情

// 父组件
<template>
  <ChildComponent @trigger-method="callChildMethod" />
</template>

<script>
  export default {
    methods: {
      callChildMethod(payload) {
        // 接收 childMethod 方法传递的 payload
      }
    }
  }
</script>

登录后复制

// 子组件
<template>
  <button @click="childMethod">触发方法</button>
</template>

<script>
  export default {
    methods: {
      childMethod() {
        this.$emit('trigger-method', { payload: '数据' }); // 发送事件触发父组件中的方法
      }
    }
  }
</script>

登录后复制

通过 provide/inject

对于需要跨多个组件层级调用的方法，可以使用 provide/inject 机制：

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

<script>
  export default {
    provide() {
      return {
        callChildMethod: this.callChildMethod
      }
    },
    methods: {
      callChildMethod() {
        // ...
      }
    }
  }
</script>

登录后复制

// 子组件
<template>
  <GrandChildComponent />
</template>

<script>
  export default {
    inject: ['callChildMethod'],
    methods: {
      callParentMethod() {
        this.callChildMethod(); // 通过 provide 注入的方法调用父组件中的方法
      }
    }
  }
</script>

登录后复制

以上就是vue怎么调用组件方法的详细内容，更多请关注php中文网其它相关文章！