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

Question

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

这是 parent 组件中的代码：

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

在 child 组件中：

<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);
    },
  },
}

当我这样做时，date-picker 显示从 parent 组件传递的正确日期，但是当我更改所选日期时，出现以下消息：

[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, 设置本地数据，但是当我这样做时，默认选择的日期第一次起作用，但是当它在 parent 组件，它不会在 child 中更新。

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

提前致谢。

Answer 1

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

在你的 parent:

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

并在您的 child 组件中，创建一个像这样的计算：

<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);
     }  
  },

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

Passing dynamically a default date for v-date-picker from parent component and returning the changed date from child component

javascript

vue.js

vuetify.js

vue-props