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

例如，我在模板中导入了一个名为

的组件，如

<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'
        })
      })
    }
  }
}

---

因此，如何在

模板
组件中获取
imgList
数组的值，我可以将数据发布到服务器？
您正在寻找的是将数据从一个子节点发送到父节点。在中，父子组件关系可以概括为支柱下降、事件上升。父对象通过道具将数据向下传递给子对象，子对象通过事件向父对象发送消息


您可以看看这个示例，您可以在父组件中定义一个方法，并使用从子组件调用该方法

您可以在父组件中定义方法
保存列表
：

<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 
    }
  }
}

<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 
    }
  }
}

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