父组件调用子组件内的方法vue

在Vue.js中，父组件想要调用子组件内部的方法通常有两种方式：

1. **通过事件（Event Emission）**：
子组件需要先声明一个自定义事件（`v-on`修饰符），然后在其内部可以触发这个事件。父组件可以通过监听这个事件并传递参数给它，间接地调用子组件的方法。例如：

   <template>
     <button @click="callChildMethod">点击调用子组件方法</button>
     <child-component @my-event="handleChildMethod"></child-component>
   </template>

   <script>
   export default {
     methods: {
       callChildMethod() {
         this.$refs.childComponent.myMethod();
       },
       handleChildMethod(data) {
         // 在这里处理接收到的数据，并调用子组件方法
       }
     }
   };
   </script>

在上面的例子中，当用户点击按钮时，会调用`callChildMethod`方法，进而通过`$refs.childComponent`引用调用`myMethod`。

2. **通过 props 和 methods 互相通信**：
如果子组件方法需要传入数据，也可以通过`props`将方法暴露给父组件，然后父组件直接调用。这种方式适用于方法不需要修改组件状态的情况。例如：

   <!-- 子组件 -->
   <template>
     <button @click="$emit('invokeMyMethod')">调用我的方法</button>
   </template>
   <script>
   export default {
     methods: {
       myMethod() {
         console.log('子组件方法');
       }
     },
     emits: ['invokeMyMethod']
   };
   </script>

   <!-- 父组件 -->
   <template>
     <child-component :invoke-my-method="callMyMethod"></child-component>
   </template>
   <script>
   export default {
     methods: {
       callMyMethod() {
         this.$refs.child.invokeMyMethod();
       }
     }
   };
   </script>