Vue component return value

Question

I'm new to VUE and am trying to clean up my code by creating components instead of repeating code.

How do you return a varform a child component?

Main.vue

<template>
     <square value="5" @click="result"></square>
</template>

Square.vue

[...]
mounted() {
     return { fromSquare: value*value } 
}

Main.vue

methods: {
   result(fromSquare) {
       this.squaredResult = fromSquare;
   }

}

Boussadjra Brahim · Accepted Answer · 2021-01-12 13:29:25Z

3

You've to emit an event from square component with value*value as payload and add its handler in parent :

mounted() {
    this.$emit("emit-result",value*value)
}

Main.vue

<template>
     <square value="5" @click="result" @emit-result="result"></square>
</template>

....

methods: {
   result(fromSquare) {
       this.squaredResult = fromSquare;
   }

}

answered Jan 12, 2021 at 13:29

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue component return value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related