vue3子组件使用父组件

子组件使用父组件的方法有几种方式可以实现。一种是通过props将父组件的方法传递给子组件，子组件可以在需要时调用该方法。另一种方式是使用自定义事件，在父组件中定义一个事件，子组件可以通过触发该事件来调用父组件的方法。

对于第一种方式，父组件可以使用@符号绑定一个子组件触发的方法名，然后通过props将该方法传递给子组件。子组件可以在需要的地方调用该方法。例如：
父组件：

<template>
  <my-child :xx="xx"></my-child>
</template>

<script>
export default {
  data() {
    return {
      xx: this.methodName
    }
  },
  methods: {
    methodName() {
      // 父组件的方法逻辑
    }
  }
}
</script>

子组件：

<template>
  <div @click="xx">点击调用父组件传过来的方法</div>
</template>

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

对于第二种方式，父组件可以在setup中使用`defineEmits`定义一个自定义事件，并在子组件中通过`emit`方法触发该事件，从而调用父组件的方法。例如：
父组件：

<template>
  <my-child @changeData="methodName"></my-child>
</template>

<script>
import { defineEmits } from 'vue';

export default {
  setup() {
    const emit = defineEmits(["changeData"]);

    function methodName() {
      // 父组件的方法逻辑
    }

    return {
      methodName
    }
  }
}
</script>

子组件：

<template>
  <div @click="changeTotal">点击调用父组件的方法</div>
</template>

<script>
export default {
  setup(props, { emit }) {
    function changeTotal() {
      emit("changeData");
    }

    return {
      changeTotal
    }
  }
}
</script>