vue父子组件怎么传递方法

1. 父子组件传递方法的基本原理

在Vue中，父组件和子组件之间通过props属性和事件实现方法传递。

2. 父组件向子组件传递方法

在父组件中，定义一个方法，然后将该方法作为props传递给子组件。子组件可以通过props属性接收并调用该方法。

3. 子组件向父组件传递方法

在子组件中，通过$emit方法触发一个自定义事件，并传递需要传递的方法。在父组件中，通过监听该自定义事件并接收传递的方法。

4. 父组件和子组件传递方法实例

例如，我们有一个父组件和一个子组件：

父组件：

<template>
  <div>
    <Child :method="parentMethod" />
  </div>
</template>

<script>
export default {
  name: 'Parent',
  methods: {
    parentMethod() {
      console.log('这是父组件的方法');
    }
  }
}
</script>

子组件：

<template>
  <div>
    <button @click="invokeParentMethod">调用父组件的方法</button>
  </div>
</template>

<script>
export default {
  name: 'Child',
  props: ['method'],
  methods: {
    invokeParentMethod() {
      this.method();
    }
  }
}
</script>

在这个例子中，父组件定义了一个方法parentMethod，并通过props属性传递给子组件。子组件中的invokeParentMethod方法通过调用this.method()来触发父组件的parentMethod方法。

5. 通过事件总线传递方法

除了通过props和事件的方式传递方法外，还可以使用Vue的事件总线机制传递方法。通过在Vue实例上创建一个全局的事件总线（event bus），可以在任意组件中发送和接收事件。

在main.js中创建全局事件总线：

import Vue from 'vue';
export const EventBus = new Vue();

在父组件中监听事件：

<script>
import { EventBus } from './main.js';
export default {
  name: 'Parent',
  created() {
    EventBus.$on('child-method', () => {
      console.log('这是子组件传递过来的方法');
    });
  }
}
</script>

在子组件中通过事件总线发送事件：

<script>
import { EventBus } from './main.js';
export default {
  name: 'Child',
  methods: {
    sendMethod() {
      EventBus.$emit('child-method');
    }
  }
}
</script>

在这个例子中，子组件通过EventBus.$emit发送名为'child-method'的事件，父组件通过EventBus.$on监听该事件并执行相应的方法。

总结

通过利用Vue的props属性、事件和事件总线等机制，父子组件之间的方法传递能够轻松实现。这种传递方式在Vue的组件化开发中非常常见，对于复杂的组件间通讯非常有用。

本文链接：https://599cn.com/post/15755.html