从父组件动态传递 v-date-picker 的默认日期并从子组件返回更改的日期

如何解决从父组件动态传递 v-date-picker 的默认日期并从子组件返回更改的日期

我有一个使用 v-date-picker 的自定义组件，该组件在很多地方都有使用。我希望能够动态设置从父组件选取的“默认”日期，同时能够修改子组件的日期。

这是父组件中的代码：

<template>
  <DatePickerMenu @selectedDate="selectedExpirationDate" :selectedDate="this.date"></DatePickerMenu>
</template>

<script>
data() {
    return {
      date: '2021-04-29',//used for testing,will eventually come from a certain calculation inside this parent component
    }
},methods: {
selectedExpirationDate(value) {
      this.expiration_date = value;
    },},</script>

在子组件中：

<template>
  <v-menu
    ref="datePickerMenu"
    v-model="datePickerMenu"
    :close-on-content-click="false"
    :return-value.sync="selectedDate"
    transition="scale-transition"
    offset-y
    min-width="auto"
  >
    <template v-slot:activator="{ on,attrs }">
      <v-text-field
        class="form"
        v-model="selectedDate"
        label="Expiration date *"
        hint="Minimum expiration date: one week from today"
        prepend-icon="mdi-calendar"
        readonly
        v-bind="attrs"
        v-on="on"
        :rules="requiredRules"
      ></v-text-field>
    </template>
    <v-date-picker
      v-model="selectedDate"
      no-title
      scrollable
      color="primary"
    >
      <v-spacer></v-spacer>
      <v-btn
        text
        color="primary"
        @click="datePickerMenu = false"
      >
        Cancel
      </v-btn>
      <v-btn
        text
        color="primary"
        @click="$refs.datePickerMenu.save(selectedDate)"
      >
        OK
      </v-btn>
    </v-date-picker>
  </v-menu>
</template>

<script>
export default {
  name: "DatePickerMenu",data () {
    return {
      datePickerMenu: false,//selectedDate: this.setSelectedDate,and changing the 'selectedDate' props to setSelectedDate
    }
  },props: ['selectedDate'],watch: {
    selectedDate: function() {
      this.$emit('selectedDate',this.selectedDate);
    },}

执行此操作时，日期选择器会显示从父组件传递的正确日期，但是当我更改所选日期时，会出现以下消息：

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead,use a data or computed property based on the prop's value. Prop being mutated: "selectedDate"

如您所见，我尝试使用传递的道具 //selectedDate: this.setSelectedDate, 设置本地数据，但是当我这样做时，默认选择的日期第一次起作用，但是当它在父组件中更改时，它赢了不在孩子的更新。

希望我的问题得到了清楚的解释..有什么解决办法吗？

提前致谢。

解决方法

您可以像这样使用 .sync 修饰符：

在您的父母中：

<DatePickerMenu
    :selectedDate.sync="this.date"
    @selectedDate="selectedExpirationDate" 
/>

在你的子组件中，像这样创建一个计算：

<v-date-picker
    v-model="selectedDateComputed"
    no-title
    scrollable
    color="primary"
>

computed: {
  selectedDateComputed: {
     get(): {
        return this.selectedDate;
     }
     set(newDate): {
        this.$emit('update:selectedDate',newDate);
     }
  }
}

当然，您也需要将它用于 v-text-field。

您可以查看 vue sync modifier docs 以了解更多信息。

,

看起来很有魅力，非常感谢！

仅供参考，这是完美的方法，但存在一些语法错误：

computed: {
    selectedDateComputed: {
     get: function () {
        return this.selectedDate;
     },set: function(newDate) {
        this.$emit('update:selectedDate',newDate);
     }  
  },