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

【问题标题】：How can I get the list value in a component?如何获取组件中的列表值？
【发布时间】：2016-12-22 06:20:31
【问题描述】：

比如我在模板中导入了一个名为<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
     }
   }
 }

那么如何获取template 组件中imgList 数组的值，我可以将数据发布到服务器？

【问题讨论】：

标签： javascript vue.js vue-component vuejs2

【解决方案1】：

您正在寻找的是从孩子向父母发送数据。在Vue.js中，父子组件关系可以概括为props down，events up。父级通过 props 向下传递数据给子级，子级通过事件向父级发送消息。

您可以查看示例here，您可以在父组件中定义方法并使用this.$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')
     }
   }
 }

【讨论】：