在 Vue 3 Typescript 中将道具传递给数据对象

Posted 2023-03-13

【中文标题】在 Vue 3 Typescript 中将道具传递给数据对象

【英文标题】：Passing a prop to data object in Vue3 Typscript

【发布时间】：2021-12-31 15:53:16

【问题描述】：

我有一个 Vue 组件（一个表），它通过 props 接收一组对象。 现在我想删除、添加或编辑这个数组中的一些条目，但我不能这样做，因为道具是现成的。 所以我想在收到属性后，我只是将那个东西复制到所述组件的数据部分中的一个对象中，我应该能够编辑它，但我还没有找到如何去做。

说items 是我的财产，ditems 是我的数据对象

  data() 
    return  ditems: this.items ;
  ,

没有工作，也没有

  data() 
    let pitems = Object.assign(, this.items);
    return  ditems ;
  ,

所以我的想法已经不多了，我希望有人可以帮助我 提前感谢您的宝贵时间

【问题讨论】：

对项目进行深层复制，即ditems: JSON.parse(JSON.stringify(this.items))，然后在您进行更改时使用this.$emit('update', this.ditems)，或者使用modelValue prop 和v-model 或使用vuex 代替

@LawrenceCherone 使用 vuex 是什么意思？我该怎么做？

将项目提交到商店，然后您不传递道具，并在您进行更改时将它们提交回

【参考方案1】：

当您尝试编辑 props 值时，您可以使用 Object.assign() 或 JSON.parse(JSON.stringify()) 复制 props 是正确的（顺便说一句，我推荐 JSON 解析方式）。

但是，复制方法最好放在watch 中而不是data() 中，因为 prop 数据最初可能是空的，并且在 api 请求或其他东西之后附带数据。所以你最好这样做：

data() 
  return 
    ditems: 
  

watch: 
  items: 
    handler(val) 
      if (Object.keys(val).length)  // check whether items data is empty
        this.ditems = JSON.parse(JSON.stringify(val))
      
    ,
    deep: true
  

顺便说一句，您使用的似乎是 Vue2，因为 Vue3 使用 setup() 而不是 data()。

【讨论】：

你指的是组合API，这两种语法在Vue 3中都是有效的。