Vue.js中如何正确在子组件使用方法？解决返回组件报错

云原生阿岚

2026-5-27

问题解答

第一个疑问：父组件不需要重复定义`backOneStep`方法

你完全不需要在任何父组件里重复写这个方法！因为你已经把返回上一步的逻辑封装在goback.vue子组件里了，子组件自己的点击事件由内部的methods处理，父组件只需要引入并使用这个组件就行——这正是组件复用的核心价值，不用在每个父组件里重复造轮子😉

第二个疑问：报错的原因及解决方案

你的两个报错本质是同一个问题：goback.vue的script标签没有正确闭合，导致Vue无法解析子组件里的methods配置，自然找不到backOneStep方法，从而抛出“方法未定义”和“点击处理器无效”的警告。

修正后的`goback.vue`代码

<template>
  <span @click="backOneStep">
    <svg type="submit" class="arrowleft" >
      <use href="../static/icons/iconsset.svg#arrowleft"></use>
    </svg>
  </span>
</template>

<script>
export default {
  name: 'goback',
  data () {
    return {
    }
  },
  methods: {
    backOneStep(){
      window.history.go(-1)
    }
  }
}
</script> <!-- 这里之前错误写成了<script>，现在修正为闭合标签 -->

修正父组件的冗余代码

你的父组件代码里有两处不必要的问题：

多余定义了backOneStep方法，直接删掉即可
组件配置里存在语法错误（data闭合后多了一个逗号）

修正后的父组件示例：

<template>
  <div class="building">
    <div id="title">
      <goback></goback> <!-- 直接使用子组件即可 -->
    </div>
  </div>
</template>

<script>
import goback from './goback.vue';

export default {
  components: {
    goback
  },
  name: 'maincomponent',
  data () {
    return {
    }
  }
  // 删掉多余的methods部分，以及语法错误的逗号
}
</script>