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

Question

我有一个使用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, 设置本地数据，但是当我这样做时，默认选择的日期第一次有效，但是当它在父组件中更改时，它不会在孩子的更新。

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

提前致谢。

Answer 1

您可以像这样使用.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 了解更多信息。

Answer 2

似乎很有魅力，非常感谢！

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

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