Question

我在更新组件数据时遇到问题。我有一个组件被用作另一个组件的数据字段中的数据对象。我遇到的问题是，当我单击“提交”按钮时，该方法应该只输入名字和姓氏，然后使用它来更新子级的搜索数据字段。但是，似乎Vue允许我无错误地推送数据，但是当我在console.log之后获得一个空数组时。有人可以告诉我我在想什么吗？任何帮助深表感谢！

这是“子级”组件的（PatientSearch）代码：

export default {
  data: () => ({
    search: [],
    selected: [],
    headers: [
      { text: 'Actions', value: '' },
      { text: 'Name', value: 'name' },
      { text: 'Status', value: 'status' },
    ],
    items: [],
  }),
  created() {
  //axios call that inserts retrieved data into items array
  }

以下是使用子组件的“父”组件代码：

export default {
  data: () => ({
    PatientSearch,
    ...
  }),
    methods: {
      submit: function() {

          let searchString = this.firstname + ' ' + this.lastname;

          console.log(searchString);
          
          PatientSearch.data().search.push(searchString);

          console.log('IN PARENT');
          console.log(PatientSearch.data().search);
      },

<template>
...
<app-layout title="Patient List" :children=PatientSearch>
</app-layout>
...
</template>

Answer 1

父组件不应访问子数据。

您应该使用props将数据从父母那里传递给孩子。

您的工作完成了一半- 您在父级方面做得很好-您将title和children传递给了它，但是却忘记了在子级接受道具。非常简单-您只需将props对象添加到子对象：

export default {
  data: () => ({
    search: [],
    selected: [],
    headers: [
      { text: 'Actions', value: '' },
      { text: 'Name', value: 'name' },
      { text: 'Status', value: 'status' },
    ],
    items: [],
  }),
  props:{
     title:{
         type:string,
          default:''
     },
     children:{
         type:object,
         default:()=>{},
     }
},
  created() {
  //axios call that inserts retrieved data into items array
  }

道具可以通过this.propName在孩子体内使用。要将数据从孩子传递回父母，可以使用custom event。您还可以在应用程序中使用全局store，以管理数据并在每个组件中开放对其的访问。

VueJS-为什么子组件中的数据在用作另一个组件中的数据时无法正确更新？

1 个答案: