如何在父子组件之间绑定数据答案

【问题标题】：How to bind data between parent-child components如何在父子组件之间绑定数据
【发布时间】：2020-06-28 05:21:45
【问题描述】：

我有一个简单的表单组件，只有一个选择选项。每当我选择一个选项时，都会在我的主组件中呈现一个子组件。我的问题是我无法让 Vue 将我的父组件数据与子组件数据绑定。

form.settings 是动态的，所以我无法在 Form.vue 处预先设置属性。

此表单通过 axios 提交到 Spring-boot Web 应用程序，当我提交表单时，我看到客户端的 form.settings 为空。

我是 Vue 新手，这是我的尝试：

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

【问题讨论】：

标签： vue.js data-binding vuejs2

【解决方案1】：

您可以将数据作为属性发送给子组件

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

要在子组件中使用该属性，您需要接收该属性

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

您还可以使用$emit() 选项从子组件与父组件进行通信。

参考：props，emit

此外，您可以按如下方式使用数据部分：

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

【讨论】：

【解决方案2】：

基本上，您在子组件中所做的只是更改该组件的数据状态，这就是您无法将其绑定到父组件的原因。

试试这个：

PresetOne.vue & PresetTwo.vue

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

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

更新：记得在 form.vue 中将settings 的默认值设置为空对象，这样您就可以从子组件中分配属性。

【讨论】：

这会导致错误。 TypeError: Cannot read property 'email' of null。可能是因为settings 对象现在没有定义键。
是的！这就是错误的原因，一个快速的解决方案是将settings 值设置为空对象，如下所示：settings: {} in form.vue
我最终做的是为父对象中的settings 对象定义每个可能的键，并通过props 绑定它们。您的回答使我找到了解决方案，因此我接受了。

【解决方案3】：

查看代码框link，这可能会有所帮助。

基本上，您发送的form.settings 为null，甚至没有在子组件中使用。所以，form.settings 没有更新的地方。

【讨论】：