javascript - 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

为了实现单向数据流，这是实现您正在寻找的内容的一种方法:

• 父级将 prop 传递给子级
• 父级注册 v-on:childUpdate="parentUpdate"事件监听器
• 当子级发生变化时，子级会发出一个 childUpdate 事件，将新值传递给父级
• 只要子进程调用childUpdate，父进程就会执行parentUpdate
• 父级将数据发送到服务器等等
• 父级更新自己的状态来表示更改
• 传递给子级的 prop 现在会在数据流动一天后自动更新

描述的最后一部分很重要:子级不会进行本地修改，而是通过向父级发出事件和新值以及负责更新联系方式的父级来进行修改。由于联系人是传递给子级的 prop，因此子级的状态会自动更新。

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

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