Vue.js中如何让自定义按钮组件调用父页面定义的函数？

Vue 中子组件调用父组件方法需要通过自定义事件实现，具体修改步骤如下：

第一步：修改子组件 btn.vue #

子组件内部触发自定义事件，不要直接调用父组件方法，修改后代码：

<template>
  <button @click="$emit('btn-click')" class="btn">
    <slot></slot>
  </button>
</template>

<script>
export default {
  name: 'btn'
}
</script>
> 原理：子组件通过`$emit`方法向外触发一个名为`btn-click`的自定义事件，父组件可以监听这个事件触发自身的方法
## 第二步：修改主页面代码
在引用的btn组件标签上监听子组件抛出的`btn-click`事件，绑定到自身的`externalFunction`方法，修改后代码：
```html
<template>
  <btn @btn-click="externalFunction">
    Button
  </btn>
</template>

<script>
import btn from '@/components/btn.vue'

export default {
  name: 'page',
  components: {
    btn
  },
  methods: {
    externalFunction () {
      // 这里的逻辑会在按钮点击时正常执行
    }
  }
}
</script>
## 可选扩展：支持传递参数
如果需要子组件给父组件方法传递参数，只需在`$emit`的第二个参数开始传入对应值即可，比如子组件写`$emit('btn-click', '自定义参数', 123)`，父组件的`externalFunction`方法可以按顺序直接接收传入的参数。

---
内容的提问来源于stack exchange，提问作者Francesco Sasso