vue 子页面调用父页面方法，如：修改页面保存成功后，刷新主页面列表

孤傲的大师

已于 2023-12-11 17:04:31 修改

阅读量697

点赞数 9

文章标签： vue.js javascript 前端

于 2023-12-11 17:03:57 首次发布

本文链接：https://blog.csdn.net/qq_33208323/article/details/134931593

版权

说明：使用事件将方法传递给子组件：可以在父页面中使用自定义事件来触发父页面的方法，并在子组件中监听该事件来执行相应的操作

父页面：

<template>  
  <div>  
    <child-component @custom-event="parentMethod"></child-component>  
  </div>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: {  
    ChildComponent  
  },  
  methods: {  
    parentMethod() {  
      // 在这里定义父页面的方法逻辑  
    }  
  }  
}  
</script>

子组件（ChildComponent.vue）：

<template>  
  <button @click="emitCustomEvent">触发自定义事件</button>  
</template>  
  
<script>  
export default {  
  methods: {  
    emitCustomEvent() {  
      this.$emit('custom-event'); // 触发自定义事件，将调用父页面的parentMethod方法  
    }  
  }  
}  
</script>