vue 子组件点击事件刷新父组件

在 Vue 中，子组件可以通过 `$emit` 方法触发一个自定义事件，从而通知父组件进行相应的操作。

具体步骤如下：

1. 在子组件中定义一个点击事件，并通过 `$emit` 方法触发该事件：

<template>
  <button @click="$emit('refresh')">点击刷新</button>
</template>

2. 在父组件中监听该自定义事件，并在事件处理函数中进行相应的操作：

<template>
  <div>
    <child-component @refresh="handleRefresh"></child-component>
    <ul>
      <li v-for="item in list">{{ item }}</li>
    </ul>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      list: ['item1', 'item2', 'item3']
    }
  },
  methods: {
    handleRefresh() {
      // 重新获取数据
      this.list = ['new item1', 'new item2', 'new item3']
    }
  }
}
</script>

在上述代码中，当子组件被点击时，会触发一个名为 `refresh` 的自定义事件，而在父组件中，我们通过 `@refresh` 监听该自定义事件，并在事件处理函数 `handleRefresh` 中重新获取数据，从而实现了刷新父组件的效果。