如何获取组件中的列表值？ [英] How can I get the list value in a component?

问题描述

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

 <模板> 
< pic-upload>< / pic-upload> 
< / template> 
 
导出默认值{
 data :(）=> （{
 show：{
 content：''，
推荐：false，
专辑：[] 
} 
}），
组件：{
 picUpload 
}，
方法：{
 submit：function（）{
 dataService.postpic（this.show）.then（（）=> ; {
 this。$ toast（{
 message：'success'
}）
}）
} 
} 
} 
  

以及< pic-upload> 组件，它返回数据和方法，如：

  // pic-upload组件
 export default {
 data（）{
 return {
 imgList：[] 
} 
}，
方法：{
 getUploadedImgList（）{
返回此.imgList 
} 
} 
} 
  

所以我怎么能在模板组件中获取 imgList 数组的值，我可以将数据发布到服务器上吗？

解决方案

什么是y你正在寻找从孩子到父母的数据发送。在

您可以查看示例这里，你可以在父组件中定义一个方法，并使用 this。$ emit（）。

你可以定义一个方法父组件中的saveLists ：

 < template> 
< pic-upload>< / pic-upload> 
< / template> 
 
导出默认值{
 data :(）=> （{
 show：{
 content：''，
推荐：false，
专辑：[] 
} 
}），
组件：{
 picUpload 
}，
方法：{
 submit：function（）{
 dataService.postpic（this.show）.then（（）=> ; {
 this。$ toast（{
 message：'success'
}）
}）
}，
 saveLists：function（）{
 //保存
的代码} 
} 
} 
  

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

  // pic-upload组件
 export default {
 data（）{
 return {
 imgList：[] 
} 
}， 
方法：{
 getUploadedImgList（）{
返回this.imgList 
}，
 callParent（）{
 this。$ emit（'saveLists'） 
} 
} 
} 
  

For example, I have import a component named <pic-upload> in the template, like

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

and in the <pic-upload> component, it returns data and a method like:

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

so how can I get the value of imgList array in the template component which I can post the data to the server?

解决方案

What you are looking for is sending data from a child to parent. In Vue.js, the parent-child component relationship can be summarized as props down, events up. The parent passes data down to the child via props, and the child sends messages to the parent via events.

You can have a look at the example here, you can define a methods in the parent component and invoke that from child component using this.$emit().

You can define a method saveLists in parent component:

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

Then you can trigger this method using $emit from child component like following:

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

这篇关于如何获取组件中的列表值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！