如何更改 Vue 上的道具名称？

Question

我是 VueJS 的新手，并尝试在组件上遵循 v-model 实现 example here

<template>
    <div class="date-picker">
        Month: <input type="number" ref="monthPicker" :value="value.month" @input="updateDate()" />
        Year: <input type="number" ref="yearPicker" :value="value.year" @input="updateDate()" />
    </div>
</template>

<script>
    export default {
        props: ['value'],

        methods: {
            updateDate() {
                this.$emit('input', {
                    month: +this.$refs.monthPicker.value,
                    year: +this.$refs.yearPicker.value
                })
            }
        }
    };
</script>

在父级上：

<template>
    <div class="wrapper">
        <date-picker v-model="date"></date-picker>
        <p>
            Month: {{date.month}}
            Year: {{date.year}}
        </p>
    </div>
</template>

<script>
    import DatePicker from './DatePicker.vue';

    export default {
        components: {
            DatePicker
        },

        data() {
            return {
                date: {
                    month: 1,
                    year: 2017
                }
            }
        }
    })
</script>

不知道为什么不能把 props: ['value'] 的名字改成 props: ['abc'] 并改变

Month: <input type="number" ref="monthPicker" :value="abc.month" @input="updateDate()" />

我收到一个错误：TypeError: Cannot read property 'month' of undefined

Answer 1

您看到的是使用 props: ['value'] 的副作用。

如果您将道具定义更改为：

  props: {
    abc: {
      type: Date,
      default: () => new Date()
    }
  },

您会看到可以将道具名称更改为您喜欢的任何名称。

工作小提琴：https://jsfiddle.net/o5uLxdhs/13/

Answer 2

您是否更改了其父组件中的属性？

父组件：

 <template>
  <div id="parent">
   <div is="test" :abc="YearMonth" @input="receiveValueFromChild"></div>
  </div>
</template>

<script>
import test from "./test.vue";

export default {
  components: {
    test: test
  },
  name: "index",
  data() {
    return {
      YearMonth: { month: 1, year: 2018 }
    };
  },
  methods: {    
    receiveValueFromChild: function(val) { //here will be toggled by childComponent
      console.log(val);
    }
  }
};
</script>

子组件：

<template>
    <div class="date-picker">
        <span>Month: </span><input type="number" v-model="abc.month" @input="updateDate()" />
        <span>Year: </span><input type="number" v-model="abc.year" @input="updateDate()" />
    </div>
</template>

<script>
export default {
  props: ["abc"],

  methods: {
    updateDate() {
      this.$emit("input", { //sent value to parentComponent
        month: this.abc.month,
        year: this.abc.year
      });
    }
  }
};
</script>