如何在 Vue.js 的子组件中正确传递方法？答案

【问题标题】：Ho to properly pass a method in a child component in Vue.js?如何在 Vue.js 的子组件中正确传递方法？
【发布时间】：2018-05-11 13:28:44
【问题描述】：

我有一个名为 goback.vue 的子组件，它的唯一功能是返回导航历史记录中的一步。我问这个问题的原因是因为我试图在许多其他组件中经常重用这个组件，并且我希望以后能够在一个地方编辑样式和模板。

这是组件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>

然后在我的几个父组件上，我以以下方式导入子组件：

<template>
  <div class="building">
    <div id="title">
      <goback></goback> // using the child component here
    </div>  
  </div>
</template>
<script>
import goback from './goback.vue';
export default {
  components: {
    goback
  },
  name: 'maincomponent',
  data () {
    return {  
      }
    }
  },
  methods: { 
     backOneStep(){ // do I need to repeat this here?
      window.history.go(-1) 
    },
  }
}
</script>

首先，我想知道是否需要在所有父组件上重复该方法，或者我是否可以将它写在我的子组件上。其次，我收到一条错误消息：

[Vue 警告]：属性或方法“backOneStep”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件。请参阅：https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。

发现于

 <Goback> at src/components/goback.vue
   <Depts> at src/components/depts.vue
     <App> at src/App.vue
       <Root>

注意：我已经仔细阅读了链接，但还是卡住了

紧接上一条错误消息后，我也收到此错误消息：

[Vue 警告]：事件“点击”的无效处理程序：未定义

发现于

 <Goback> at src/components/goback.vue
   <Depts> at src/components/depts.vue
     <App> at src/App.vue
       <Root>

能告诉我我能做些什么来避免这种情况吗？这和道具有关吗？我曾尝试在 goback.vue 的数据中声明“backOneStep”道具，但我不确定我是否正确地做到了。我在这里错过了什么？

【问题讨论】：

标签： javascript vue.js components

【解决方案1】：

您可以使用$emit 事件告诉父级在单击子组件时“返回”：

<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',
    methods: {
      backOneStep() {
        this.$emit('back')
      }
    } 
  }     
</script>

在父级中：

<template>
  <div class="building">
    <div id="title">
      <goback @back="window.history.go(-1)"></goback>
    </div>  
  </div>
</template>

【讨论】：

感谢@sovalina，但它没有用。渲染父组件后，我会立即收到完全相同的错误消息。
@JoaoAlvesMarrucho 是哪一个？
渲染父组件时的两个错误消息：/
[Vue 警告]：属性或方法“backOneStep”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件。请参阅：vuejs.org/v2/guide/…。在 src/components/goback.vue 的中找到在 src/components/depts.vue 在 src/App.vue && [Vue 警告]：事件“点击”的处理程序无效：在等中发现未定义......

【解决方案2】：

这对我来说是这样做的，因为我想在组件上隔离这个元素/功能的主要原因是能够在一个地方更改元素的样式：

子组件：

<template>
    <span v-on:click="$emit('back')">
        <svg type="submit" class="arrowleft" >
        <use href="../static/icons/iconsset.svg#arrowleft"></use>
        </svg>
      </span> 
</template>
<script>
export default {
    name: 'goback',
    data () {
        return {

        }
    } 
}     
<script>
<style scoped>
     //  enter styles here
</style>

在父级上：

<template>
  <div class="building">
    <div id="title">
      <goback @back="window.history.go(-1)"></goback>
    </div>  
  </div>
</template>
<script>
import goback from './goback.vue';    
export default {
  components: {
    goback
  },
  methods: {
    backOneStep(){
      window.history.go(-1)
    },
  }
}
</script>

【讨论】：