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

例如，我导入了一个名为<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>组件，它返回数据和方法，例如：

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

那么我怎样才能得到的值imgList数组中的template我可以将数据发布到服务器的组件？

您正在寻找的是将数据从孩子发送到父母。在Vue.js https://v2.vuejs.org/v2/guide/components.html#Composing-Components，父子组件关系可以概括为 props down，events up。父级通过 props 将数据传递给子级，子级通过事件向父级发送消息。

你可以看一下例子here https://v2.vuejs.org/v2/guide/components.html#Using-v-on-with-Custom-Events，您可以在父组件中定义方法并使用子组件调用该方法this.$emit() https://v2.vuejs.org/v2/api/#vm-emit.

你可以定义一个方法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 
    }
  }
}

然后你可以使用触发这个方法$emit来自子组件，如下所示：

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