如何在vue中将数组从一个组件发送到另一个组件答案

【问题标题】：How to send array from one component to another in vue如何在vue中将数组从一个组件发送到另一个组件
【发布时间】：2021-08-07 21:20:25
【问题描述】：

我有一个 vue 应用程序，我在其中保存一个日期选择器对话框中的数组。我的日期选择器对话框和输入是与我的对话框分开的组件。现在我想尝试将保存在 datepicker 组件中的数组发送到我的对话框所在的组件，并通过将其推送到对话框组件内的另一个数组来显示它。但是数组没有被发送。

日期选择器组件：

<script>
export default {
  name: "DatePickerComponent",
  data: () => ({
    selectedTime: [],

    dates: [{date : new Date().toISOString().substr(0,10), time: []}],
    menu: false,
    modal: false,
    menu2: false,
  }),

  methods:{
      addTimeFields(){

        this.selectedTime.push({
          startTime:"",
          endTime: "",
        })
        this.dates[0].time.push(
        this.selectedTime
          )
      },

      saveDateAndTIme(){
        console.log(this.selectedTime)
      }
  }



};
</script>

我正在使用一种方法来访问 datepicker 中的数组的对话框组件：

data: () => ({
    dialog: false,
    date: [],
    menu: false,
    modal: false,
    menu2: false
  }),

     methods:{
         save() {
  this.date.push(
    this.$refs.datepicker.dates
  )
          console.log(this.date)
    
        }
    
    
      }

但这只是将初始数组发送到对话框组件内的日期数组。初始值为dates: date current date, time [] 我是 vue 新手，也许这是一个小错误，我似乎找不到，有人能给我指点吗

【问题讨论】：

我修复了它我正在使用 this$refs 方法从我的父组件访问它我会将我的解决方案添加到更新的问题中
回答您自己的问题，然后将其标记为已接受，因此有相同问题的其他用户可以看到如何“修复”它????????
我会做的，我应该编辑它还是发布一个正确的新答案？
只写一个新答案....欢迎来到 StackOverflow ????
好吧，我会做的:)

标签： javascript typescript vue.js vuetify.js

【解决方案1】：

解决方案是更改父组件中的保存方法以使用其中的 this.$refs。

并将子组件的使用更改为：

<datepickercomponent ref= "datepicker"/>

和

data: () => ({
    dialog: false,
    date: [],
    menu: false,
    modal: false,
    menu2: false
}),
methods:{
    save() {
    this.date.push(
        this.$refs.datepicker.dates
    )        
}

【讨论】：