如何将可编辑数据传递给组件？

Posted 2023-02-23

【中文标题】如何将可编辑数据传递给组件？

【英文标题】：How to pass editable data to component?

【发布时间】：2018-10-25 21:27:41

【问题描述】：

我正在开发一款可让您捕捉和编辑足球比赛结果的应用。

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

<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 组件中的数据可编辑，以便安全地传播到父组件？

【参考方案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>

【讨论】：

有点迂回，但这做到了！不会抱怨。非常感谢