Как правильно передать метод в дочерний компонент в Vue.js?

Question

У меня есть дочерний компонент с именем 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 warn]: свойство или метод "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 warn]: недопустимый обработчик для события "click": получил неопределенный

, найденный в

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

Скажите, что я могу сделать, чтобы избежать этого?Это связано с реквизитом?Я попытался объявить реквизит "backOneStep" в данных goback.vue , но я не уверен, что сделал это правильно.Что мне здесь не хватает?

Answer 1

Это было сделано для меня, так как основной причиной, по которой я хотел изолировать этот элемент / функцию в компоненте, была возможность изменить стиль элемента в одном месте:

Дочерний компонент:

<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>

Answer 2

Вы можете использовать событие $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>