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

vue怎么调用组件方法

下次还敢

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

原创

2376人浏览过

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

vue怎么调用组件方法

如何在 Vue 中调用组件方法

直接调用

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

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

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

登录后复制

通过事件触发

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

Vuex参考手册中文CHM版

Vuex是一个专门为Vue.js应用设计的状态管理模型 + 库。它为应用内的所有组件提供集中式存储服务，其中的规则确保状态只能按预期方式变更。它可以与 Vue 官方开发工具扩展(devtools extension) 集成，提供高级特征，比如零配置时空旅行般（基于时间轴）调试，以及状态快照导出/导入。本文给大家带来Vuex参考手册，需要的朋友们可以过来看看！

查看详情

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

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

登录后复制

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

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

登录后复制

通过 provide/inject

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

<code class="javascript">// 父组件
<template>
  <ChildComponent />
</template>

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

登录后复制

<code class="javascript">// 子组件
<template>
  <GrandChildComponent />
</template>

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

登录后复制

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