[Vuejs]-Ho to properly pass a method in a child component in Vue.js?

by

2👍

✅

You can use a $emit event to tell the parent to “go back” on click in the child 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',
    methods: {
      backOneStep() {
        this.$emit('back')
      }
    } 
  }     
</script>

And in the parent:

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

0👍

This did it for me as the main reason I wanted to isolate this element/function on a component was to be able to change the style of the element in one place:

The child component:

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

On the parent: 

<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>
👤Joao Alves Marrucho

Leave a comment