关于vue中父组件调用子组件的方法

最新推荐文章于 2025-05-13 13:49:32 发布

原创最新推荐文章于 2025-05-13 13:49:32 发布 · 258 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍了一种在Vue.js应用程序中实现子组件刷新其所在页面的方法。通过父组件调用子组件中的方法来触发页面刷新，具体实现了点击按钮后利用$router.go(0)来达到刷新效果。

以子组件刷新页面的方法，在父组件中调用子组件刷新页面方法为例

子组件页面-----》EditList：

<template>
  <div class="editList">
    <el-button type="primary" @click="clickMe">我是子组件</el-button>
  </div>
</template>

<script>
export default {
  name: 'EditList',
  data(){
    return {
    }
  },
  methods:{
    clickMe(){
      this.sonFn()
    },
    sonFn(){
      this.$router.go(0)
    }
  }
}
</script>

父组件页面-----》list：

<template>
  <div class="list">
      <h3>父组件页面</h3>
      <el-button type="success" @click="toClick">点我调用子组件方法</el-button>
       <!-- 3、使用子组件 -->
      <EditeList ref="childEvent"/>
  </div>
</template>

<script>
// 1、引入子组件
import EditeList from '@/components/EditList'
export default {
  name: 'List',
  data(){
    return {
    }
  },
  methods:{
    toClick(){
    	// 父组件页面调用子组件方法
      	this.$refs.childEvent.sonFn();
    }
  },
  components:{
    // 2、注册子组件
    EditeList
  }
}
</script>