Get data from a vue component child and bind to an object in parent component

Question

<user-data @change="setUserInfo"></user-data"> this is the child component where have used emits to pass data.

here is the method of parent component.

 setUserInfo(data) {
   this.obj.payment_details = data;
 },

is it possible to bind data from the above method?

export default {
    data: () => ({
        dialog: false,
        obj: new Expense(),
        saveLoader: false,
    }),
}

What do you want to say with is it possible to bind data from the above method?. What result you want? — Raphael Rlt
– Raphael Rlt, Commented Oct 17, 2022 at 9:54
Usually, you use emits+props. Then, the parent/child relationship is a matter of reactive by default if properly done. No extra work needed. — kissu
– kissu, Commented Oct 17, 2022 at 10:07

ericmp · Accepted Answer · 2022-10-17 10:16:20Z

2

Here you have an example on how to emit data from child component to parent (using Vue3 Composition API script setup):

Parent:

<template>
  <Comp @my-var="callback" />
  
  {{ test }}
</template>

<script setup>
import { ref } from 'vue'
import Comp from './Comp.vue'
const test = ref('')

const callback = data => test.value = data
</script>

Child:

<template>
<button
  v-text="'click'"
  @click="doEmit()"
/>
</template>

<script setup>
const emits = defineEmits(['myVar'])

const doEmit = () => emits('myVar', 'emiting this data')
</script>

Check out the Playground

answered Oct 17, 2022 at 10:16

ericmp

2,41911 silver badges27 bronze badges

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

1 Comment

kennie Over a year ago

am on vue2 is it possible too

Collectives™ on Stack Overflow

Get data from a vue component child and bind to an object in parent component

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related