vue子组件函数怎么调用

<!-- 父组件 -->
<MyComponent>
  <template v-slot:my-slot="props">
    <button @click="props.myFunction()">调用父组件方法</button>
  </template>
</MyComponent>

<!-- 子组件 -->
<template>
  <slot name="my-slot" :myFunction="myFunction"></slot>
</template>

<script>
export default {
  methods: {
    myFunction() {
      console.log('子组件调用了父组件方法');
    }
  }
};
</script>

<!-- 父组件 -->
<template>
  <MyComponent ref="myComponent"></MyComponent>
</template>

<script>
export default {
  mounted() {
    this.$refs.myComponent.myFunction(); // 调用子组件方法
  }
};
</script>

<!-- 子组件 -->
<template>
  <button @click="myFunction()">调用子组件方法</button>
</template>

<script>
export default {
  methods: {
    myFunction() {
      console.log('子组件方法被调用');
    }
  }
};
</script>

<!-- 子组件 -->
<template>
  <button @click="emitMyEvent()">调用子组件方法</button>
</template>

<script>
export default {
  methods: {
    emitMyEvent() {
      this.$emit('my-event', { data: '从子组件传递的数据' });
    }
  }
};
</script>

<!-- 父组件 -->
<template>
  <MyComponent @my-event="handleMyEvent"></MyComponent>
</template>

<script>
export default {
  methods: {
    handleMyEvent(event) {
      console.log(event.data); // 接收从子组件传递的数据
    }
  }
};
</script>

<!-- 父组件 -->
<template>
  <provide :myMethod="myMethod">
    <MyComponent></MyComponent>
  </provide>
</template>

<script>
export default {
  provide() {
    return {
      myMethod: this.myMethod
    };
  },
  methods: {
    myMethod() {
      console.log('父组件方法被调用');
    }
  }
};
</script>

<!-- 子组件 -->
<template>
  <button @click="callMyMethod()">调用父组件方法</button>
</template>

<script>
export default {
  inject: ['myMethod'],
  methods: {
    callMyMethod() {
      this.myMethod();
    }
  }
};
</script>