Within my project, I have a child component named goback.vue, whose sole purpose is to navigate back one step in the history. The reason for my inquiry is that I intend to utilize this component across multiple other components and would like the flexibility to modify its style and template from a single location in the future.
Below is the code snippet of the goback.vue component:
<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>
In several of my parent components, I import the child component as shown below:
<template>
<div class="building">
<div id="title">
<goback></goback> // utilizing 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>
My first query revolves around whether I should duplicate the method in all parent components or if it can be defined solely in the child component. Secondly, I encounter an error message:
[Vue warn]: Property or method "backOneStep" is not defined on the instance but referenced during render. Ensure that this property is reactive by declaring it in the data option or initializing it for class-based components. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
<Goback> at src/components/goback.vue
<Depts> at src/components/depts.vue
<App> at src/App.vue
<Root>
Please note that although I reviewed the provided link, I am still encountering issues.
Following the above error message, another error arises:
[Vue warn]: Invalid handler for event "click": got undefined
found in
<Goback> at src/components/goback.vue
<Depts> at src/components/depts.vue
<App> at src/App.vue
<Root>
I seek advice on how to resolve these errors. Could this be linked to props? While attempting to declare the "backOneStep" prop in the data section of goback.vue, I am unsure if I executed it correctly. What element am I overlooking in this scenario?