Как связать данные между родительскими и дочерними компонентами - PullRequest
Новая
       8

Как связать данные между родительскими и дочерними компонентами

0 голосов
/ 17 марта 2020

У меня есть простой компонент Form с опцией select. Всякий раз, когда я выбираю опцию, дочерний компонент отображается внутри моего основного компонента. Моя проблема в том, что я не могу заставить Vue связать данные моего родительского компонента с данными дочернего компонента.

form.settings - это Dynami c, поэтому я не могу установить свойства перед рукой на Form.vue.

Эта форма отправляется в веб-приложение Spring-boot через ax ios, и я вижу, что form.settings является нулевым на стороне клиента, когда я отправляю форму.

Я новичок в Vue и вот моя попытка:

Форма. vue

<template>
  <div>
    <form>
      <div>
        <select v-model="form.type">
          <option></option>
          <option value="1">1</option>
          <option value="2">2</option>
        </select>
      </div>
      <PresetOne v-if="form.type == '1'" :settings="form.settings"/>
      <PresetTwo v-if="form.type == '2'" :settings="form.settings"/>
    </form>
  </div>
</template>

<script>
import PresetOne from "@/components/PresetOne"
import PresetTwo from "@/components/PresetTwo"

export default {
  name: "SettingsForm",
  data: () => ({
    form: {
      type: null,
      settings: null
    }
  }),
  components: {
    PresetOne,
    PresetTwo
  }
}
</script>

PresetOne. vue

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

<script>
export default {
  name: "PresetOne",
  data: () => ({
    settings: {
      username: null,
      password: null
    }
  })
}
</script>

PresetTwo. vue

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

<script>
export default {
  name: "PresetTwo",
  data: () => ({
    settings: {
      email: null,
      password: null
    }
  })
}
</script>

Ответы [ 3 ]

1 голос
/ 17 марта 2020

Вы можете отправлять данные дочерним компонентам в виде свойств 

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

Чтобы использовать свойство в дочернем компоненте, вам необходимо получить свойство, например 

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

Вы также можете общаться с дочерний компонент к родительскому компоненту с использованием опции $emit().

Ссылка: props , emit

Кроме того, вы можете использовать свой раздел данных как следует: 

data:()=>{
  return {
    // add your variables here
  }
}
0 голосов
/ 17 марта 2020

Посмотрите на коды и поле ссылка , это может быть полезно.

По сути, отправляемое form.settings равно нулю, которое даже не используется в дочернем компоненте. Так что, не где form.settings обновляется.

0 голосов
/ 17 марта 2020

В основном то, что вы делаете в дочерних компонентах, это изменение состояния данных только этого компонента, поэтому вы не можете связать это с родителем.

Попробуйте это:

PresetOne. vue & PresetTwo. vue

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

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

Обновление: не забудьте установить значение по умолчанию settings в форме. vue как пустой объект так что вы сможете назначать свойства дочерним компонентам.

...