[Vuejs]-How to bind data between parent-child components

by

0👍

✅

Basically what are you doing in the child components is changing the Data state of that component only, that’s the reason why you couldn’t bind that to the parent.

Try this:

PresetOne.vue & PresetTwo.vue

<template>
  <div>
    <input v-model="settings.email" />
    <input v-model="settings.password" />
  </div>
</template>

<script>
export default {
  props: ['settings']
}
</script>

Update: remember to set settings‘s default value in form.vue to be an empty object so you can be able to assign the properties from the child components.

👤MohKoma

1👍

You can send data to child components as properties

<PresetOne v-if="form.type == '1'" :settings="form.settings"/>

To use the property in child component, you need to receive the property like

export default {
  name: "PresetOne",
  props:["settings"]
}

You can also communicate from child component to parent component using the $emit() option.

Reference : props, emit

Also, you can use your data section as follows:

data:()=>{
  return {
    // add your variables here
  }
}
👤Rijosh

0👍

Have a look at codesandbox link, this might be helpful.

Basically, form.settings that you’re sending is null which is not even being used in the child component. So, no where form.settings is being updated.

👤priyanshu sinha

Leave a comment