Vue.js 编辑动态组件中的变量

Question

我想制作一个对象列表。 （列表的）每个元素都由一个子组件可视化。我的目标是创建一个动态列表，我可以在其中编辑元素。

我有一个父组件<contacts-list-form> 有一个联系人数组，并在<contact-element-form> 中动态地显示他们：

<contact-element-form v-for="contact in contacts" :key="contact.id" :contact="contact"></contact-element-form>

contact-element-form 看起来像这样：

<template lang="html">
  <md-card>
    <md-card-header>
      <div class="md-title">Contact</div>
        <md-icon @click="removeMyself">remove</md-icon>
    </md-card-header>
      <md-card-content>
        <md-input-container>
          <md-icon>person</md-icon>
          <label>contactName</label>
          <md-input name="contactName" v-model="contact.name" required />
        </md-input-container>

        <md-input-container>
          <md-icon>email</md-icon>
          <label>contactEmail</label>
          <md-input name="contactEmail" v-model="contact.email" required />
        </md-input-container>

        <md-input-container>
          <md-icon>phone</md-icon>
          <label>contactPhoneNumber</label>
          <md-input name="contactPhoneNumber" v-model="contact.phoneNumber" required />
        </md-input-container>
    </md-card-content>
  </md-card>
</template>

<script>
export default {
  props: ["contact"],
  data() {
    return {
      contact: {},
    }
  },
  methods: {
    removeMyself() {
      console.debug(this.contact.id + ". id will be removed.");
      // it will emits to its parent.
    }
  },
  create() {}
}
</script>

<style lang="css">
</style>

我怎样才能获得每个 <contact-element-form> 的数据是可编辑的，并且父级 (<contacts-list-form>) 会注意到这一点，并将修改发送到服务器。

感谢您的回答，并提前提出建议！

Answer 1

为了尊重单向数据流，这是实现您正在寻找的东西的一种方式：

• 父母将道具传给孩子
• 父注册 v-on:childUpdate="parentUpdate" 事件监听器
• 当子级发生突变时，子级会发出一个 childUpdate 事件，将新值传递给父级
• 每当孩子调用 childUpdate 时，父母都会执行 parentUpdate
• 父母将数据发送到服务器等等
• 父级更新自己的状态以表示更改
• 由于数据流过一天，传递给孩子的道具现在会自动更新

描述的最后一部分很重要：孩子不会进行本地修改，但修改是通过将事件和新值发送给负责更新联系人详细信息的父级和父级来进行的。由于联系人是传递给孩子的道具，孩子的状态会自动更新。

这里有一个例子https://vuejs.org/v2/guide/components.html#Using-v-on-with-Custom-Events

另一种方法是使用 v-model，它可以从链接部分下方的文档中找到。