父组件触发子组件的函数方法

在 Vue.js 中，父组件想要触发子组件的函数（通常是自定义方法或事件处理器）通常有两种常见的方式：

1. **通过`$emit`触发自定义事件**:
父组件可以调用 `this.$emit` 方法来触发一个自定义的事件，这会在子组件上触发一个名为该事件名的监听器。比如，如果你有一个按钮，在点击时想让子组件更新状态，可以在父组件的按钮点击处理程序里这样做：

   parentComponent.vue-template:
   <button @click="handleButtonClick">触发子组件方法</button>

   methods: {
     handleButtonClick() {
       this.$emit('childMethod', '传递给子组件的参数');
     }
   }
   
   childComponent.vue-template:
   <template>
     <div v-on:childMethod="handleParentEvent"></div>
   </template>
   
   methods: {
     handleParentEvent(data) {
       // 子组件在这里接收并处理来自父组件的数据
     }
   }

2. **通过`props`和`methods`传递函数**:
如果你想直接调用子组件内的某个函数，可以将这个函数作为 `props` 从父组件传递给子组件，然后在子组件中直接调用它。例如：

   // 父组件传递一个方法
   parentComponent.vue-template:
   <child-component :callMe="myCallback" />

   data() {
     return {
       myCallback: function(arg) {
         // 这里是父组件的函数，子组件会接到这个引用
       }
     }
   }

   // 子组件接收并调用
   childComponent.vue-template:
   created() {
     this.callMe('传递给父组件的参数');
   }

这种方法适用于函数不需要携带额外参数的情况，若需要传递参数，仍然可以借助事件系统或者 `props` 的变化通知机制。

这两种方式都强调了组件间的解耦和信息单向流动原则。