vue父组件如何调子组件中的方法

在Vue.js中，父组件调用子组件中的方法通常通过props传递一个事件对象或者是ref属性。这里有两种常见的方法：

1. **通过Event Emitter（$emit）**:
子组件可以定义一个自定义事件，例如`@someCustomEvent`。当子组件需要触发这个事件并携带数据时，可以这样做：

   <template>
     <button @click="callParentMethod">触发父方法</button>
   </template>

   <script>
   export default {
     methods: {
       callParentMethod() {
         this.$emit('someCustomEvent', { data: 'from child' });
       }
     }
   };
   </script>

父组件接收到这个事件后，可以在methods中监听并处理它：

   <template>
     <ChildComponent @someCustomEvent="handleChildMethod"></ChildComponent>
   </template>

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

   export default {
     components: { ChildComponent },
     methods: {
       handleChildMethod(data) {
         console.log('Received data:', data);
       }
     }
   };
   </script>

2. **通过ref和this.$refs**:
如果需要更直接地访问子组件实例，可以使用`ref`属性创建一个引用，并在JavaScript里操作它：

   <template>
     <ChildComponent ref="childComponent" />
     <button @click="invokeChildMethod">调用子方法</button>
   </template>

   <script>
   export default {
     methods: {
       invokeChildMethod() {
         this.$refs.childComponent.childMethod();
       }
     }
   };
   </script>

在子组件中，假设有一个名为`childMethod`的方法：

   <script>
   export default {
     methods: {
       childMethod() {
         // 实现子方法...
       }
     }
   };
   </script>