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

在Vue3中，父组件向子组件传递方法可以通过两种方式实现：

1.使用props属性将方法传递给子组件，然后在子组件中调用该方法。具体实现步骤如下：

①在父组件中定义一个方法，并将该方法作为props属性传递给子组件：

<template>
  <div>
    <child :myMethod="parentMethod"></child>
  </div>
</template>

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

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

②在子组件中通过props接收该方法，并在需要的地方调用该方法：

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

<script>
export default {
  props: {
    myMethod: {
      type: Function,
      required: true
    }
  },
  methods: {
    callParentMethod() {
      this.myMethod();
    }
  }
}
</script>

2.使用$emit方法触发父组件中的方法。具体实现步骤如下：

①在父组件中定义一个方法，并将该方法作为props属性传递给子组件：

<template>
  <div>
    <child @my-event="parentMethod"></child>
  </div>
</template>

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

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

②在子组件中通过$emit方法触发父组件中的方法：

<template>
  <div>
    <button @click="$emit('my-event')">调用父组件的方法</button>
  </div>
</template>