如何获取组件中的列表值?

How can I get the list value in a component?

例如,我在模板中导入了一个名为<pic-upload>的组件,比如

<template>
  <pic-upload></pic-upload>
</template>

export default {
  data: () => ({
    show: {
    content: '',
    recommend: false,
    albums: []
  }
}),
components: {
  picUpload
},
methods: {
  submit: function () {
    dataService.postpic(this.show).then(() => {
        this.$toast({
          message: 'success'
        })
      })
    }
  }
}

并且在 <pic-upload> 组件中,它 returns 数据和方法如下:

// pic-upload component
export default {
  data () {
     return {
       imgList: []
     }
   },
  methods: {
     getUploadedImgList () {
       return this.imgList
     }
   }
 }

那么我怎样才能在 template 组件中获取 imgList 数组的值,我可以 post 将数据发送到服务器?

您正在寻找的是将数据从 child 发送到 parent。在Vue.js中,parent-child的组件关系可以概括为道具向下,事件向上。 parent 通过 props 将数据向下传递给 child,child 通过事件向 parent 发送消息。

你可以看看例子here, you can define a methods in the parent component and invoke that from child component using this.$emit()

您可以在 parent 组件中定义方法 saveLists:

<template>
  <pic-upload></pic-upload>
</template>

export default {
  data: () => ({
    show: {
    content: '',
    recommend: false,
    albums: []
  }
}),
components: {
  picUpload
},
methods: {
  submit: function () {
    dataService.postpic(this.show).then(() => {
        this.$toast({
          message: 'success'
        })
      })
    },
  saveLists: function () {
    //Code to save 
    }
  }
}

然后您可以使用 child 组件中的 $emit 触发此方法,如下所示:

// pic-upload component
export default {
  data () {
     return {
       imgList: []
     }
   },
  methods: {
     getUploadedImgList () {
       return this.imgList
     },
     callParent () {
       this.$emit('saveLists')
     }
   }
 }