Vue子组件向父组件传递方法

一、props

对于Vue中的组件通信，子组件向父组件传递方法的常见方法是通过props。假设我们有一个父组件和一个子组件DemoChild，我们可以通过props属性将父组件的方法传递给子组件。以下是示例代码：

// 父组件
<template>
  <div>
    <DemoChild :doSomething="handleSomething"/>
  </div>
</template>

<script>
import DemoChild from './DemoChild.vue';

export default {
  components: { DemoChild },
  methods: {
    handleSomething() {
      console.log('This is handleSomething method!');
    }
  }
};
</script>

// 子组件
<template>
  <div @click="doSomething">Click me!</div>
</template>

<script>
export default {
  props: ['doSomething']
};
</script>

在父组件中，我们通过在子组件标签上添加属性:doSomething=”handleSomething”，将父组件中的方法传递给子组件。在子组件中，我们通过在props数组中声明doSomething，来接收父组件传递的方法。在子组件的模板中，通过@click监听click事件，并触发doSomething方法。这时候就会调用父组件中的handleSomething方法。

二、$emit事件

除了使用props来传递方法，Vue还提供了另一种方式：使用$emit事件。利用$emit方法，子组件可以向父组件传递事件，并携带相应的数据。以下是示例代码：

// 父组件
<template>
  <div>
    <DemoChild @do-something="handleSomething"/>
  </div>
</template>

<script>
import DemoChild from './DemoChild.vue';

export default {
  components: { DemoChild },
  methods: {
    handleSomething(data) {
      console.log(data); // 'Hello World!'
    }
  }
};
</script>

// 子组件
<template>
  <div @click="doSomething">Click me!</div>
</template>

<script>
export default {
  methods: {
    doSomething() {
      this.$emit('do-something', 'Hello World!');
    }
  }
};
</script>

在子组件中，我们通过Click me!触发doSomething方法，并在方法中使用this.$emit(‘do-something’, ‘Hello World!’)向父组件传递do-something事件，并且携带数据’Hello World!’。在父组件中，我们通过@do-something=”handleSomething”捕获do-something事件，并且在handleSomething方法中读取携带的数据。

三、inject / provide

Vue还提供了一种高级的组件通信方式：通过inject / provide。当我们想要跨越多个级别的父子关系传递数据时，这种方式会非常有用。当我们在一个组件中定义了provide属性后，这个组件的子孙组件都可以注入provide属性，不管这些组件是否彼此存在父子关系。以下是示例代码：

// 父组件
<template>
  <div>
    <DemoChild/>
  </div>
</template>

<script>
import DemoChild from './DemoChild.vue';

export default {
  provide: {
    doSomething: () => {
      console.log('This is handleSomething method!');
    }
  },
  components: { DemoChild }
};
</script>

// 子组件
<template>
  <div @click="doSomething">Click me!</div>
</template>

<script>
export default {
  inject: ['doSomething']
};
</script>

在父组件中，我们在provide属性中定义了一个名为doSomething的方法。子组件DemoChild可以通过inject属性来注入doSomething属性，并在子组件模板中使用@click监听click事件，并调用注入的doSomething方法。

四、事件总线

事件总线是一种非常灵活的组件通信方式，它可以支持任何组件之间的通信。Vue.js提供了一个全局事件总线Vue.prototype.$bus。任何Vue实例都可以通过this.$bus.$emit()来触发一个事件，也可以通过this.$bus.$on()来监听一个事件。以下是示例代码：

// 事件总线实例
import Vue from 'vue';
export const eventBus = new Vue();

// 父组件
<template>
  <div>
    <DemoChild/>
  </div>
</template>

<script>
import DemoChild from './DemoChild.vue';

export default {
  components: { DemoChild },
  mounted() {
    this.$bus.$on('handle-something', this.handleSomething);
  },
  beforeDestroy() {
    this.$bus.$off('handle-something', this.handleSomething);
  },
  methods: {
    handleSomething() {
      console.log('This is handleSomething method!');
    }
  }
};
</script>

// 子组件
<template>
  <div @click="doSomething">Click me!</div>
</template>

<script>
import { eventBus } from '@/event-bus.js';

export default {
  methods: {
    doSomething() {
      eventBus.$emit('handle-something');
    }
  }
};
</script>

在父组件中，我们通过this.$bus.$on(‘handle-something’, this.handleSomething)监听名为handle-something的事件，并且在事件触发时，调用handleSomething方法。在子组件中，我们通过eventBus.$emit(‘handle-something’)触发handle-something事件。事件总线可以说是Vue组件通信中最灵活的一种方式，但也需要注意事件名称不要重复，否则会影响其他组件的正常工作。