vue.js - 如何将可编辑数据传递给组件？

Question

我正在开发一个应用程序，该应用程序允许您捕获和编辑足球比赛结果。

有一个Matches组件调用 AP 从服务器（match_list）获取多个匹配的数据，然后渲染一堆Match组件，将数据作为道具传递给这些子组件以填充它们的初始值。

<component :is="Match" v-for="match in match_list"
                     v-bind:key="match.id"
            v-bind="match"></component>

在 Match 组件上，我接受所有值作为道具。但是我收到一个警告，提示不应编辑道具，而应改为数据元素。所以我尝试将它们传递给组件数据。

export default {
        name: "Match",
        props: ['local_team', 'visitor_team', 'localScore', 'visitorScore', 'date', 'time', 'location', 'matchId'],
      data(){
          return{
            id: this.id,
            local_team: this.local_team,
            visitor_team: this.visitor_team,
            location: this.location,
            date: this.date,
            time: this.time,
            localScore: this.localScore,
            visitorScore: this.visitorScore
          }
      },

现在我收到一个警告，可编辑数据不应该基于道具。

如何使 Match 组件中的数据可编辑，以便安全地传播到父组件？

标签： vue.jsvuejs2vue-component

Answer 1

您需要在组件的道具上接受匹配对象，并在数据上制作它的副本（用作输入的模型）。当您的模型更改时，您应该将该更改发送给父级，以便它可以适当地更改自己的数据（然后通过子级的道具正确传递和反映）：

在此示例中，我观察模型的任何更改，然后直接发出事件，您当然可以通过提交按钮来替换该行为，该按钮会在单击或其他内容时触发事件。

Vue.component('match', {
  template: `
    <div>
      <p>{{match.name}}</p>
      <input v-model="matchModel.name" />
    </div>
  `,
  props: ['match'],
  data() {
    return {
      matchModel: Object.assign({}, this.match)
    }
  },
  watch: {
    matchModel: {
      handler(val) {
        this.$emit('match-change', val)
      },
      deep: true,
    }
  }
});


new Vue({
  el: "#app",
  data: {
    matches: [{
        id: 1,
        name: 'first match'
      },
      {
        id: 2,
        name: 'second match'
      }
    ]
  },
  methods: {
    onMatchChange(id, newMatch) {
      const match = this.matches.find((m) => m.id == id);
      Object.assign(match, newMatch);
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
  <match v-for="match in matches" :match="match" :key="match.id" @match-change="onMatchChange(match.id, $event)"></match>
</div>