$emit 在计算之前执行答案

【问题标题】：$emit executes before computed$emit 在计算之前执行
【发布时间】：2019-04-08 13:43:36
【问题描述】：

我正在尝试发出我修改的道具。我可以直接使用 prop 执行此操作，它可以工作，但我收到 Vue 警告：Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders

所以我尝试将 prop 放入计算中，但在计算执行之前执行发射。

template:
          <input
                v-on:keyup="validatedate(localDate)"
                v-on:change="emitAnswer(localDate)"
                v-model="localDate">
 ,
 computed: {
    dateLocal: {
        get: function () {
            return this.date
        }
 }
 methods: {
     emitAnswer: function (date) {
        this.$emit('myFunc', date);
    }
 }

【问题讨论】：

标签： javascript vue.js data-binding

【解决方案1】：

由于 Vue 不能保证 v-model 会在 v-on:change 之前执行，所以你可以使用 watchers 只在组件中属性的值发生变化时才调用 emit，例如：

watch {
  date() {
     this.$emit('myFunc', this.date)
  }
}

【讨论】：

我不想在每次用户向输入中添加字符时发出。当用户在输入字段外按下回车键或左键单击时，应该执行发射。这是由 'v-on:change' 处理的
@Amar 然后你可以使用 keyup.enter 或 blur 事件。

【解决方案2】：

首先，我认为您的计算名称错误（“dateLocal”应该是“localDate”），但我认为这不是问题。

如果设置了值，为什么不在发出之前检查内部方法？

methods: {
    emitAnswer: function (date) {
        if (date) {
            this.$emit('myFunc', date)
        }
    }
}

另外，为了更好地练习，你应该使用sethandler 来处理你即将修改的计算属性：

 computed: {
     localDate: {
         get () {
             return this.date
         },
         set (date) {
             if (date) {
                 this.$emit('myFunc', date)
             }
         }
     }
 }

希望这对您有所帮助，如果您需要进一步的帮助，请随时回复。

【讨论】：

【解决方案3】：

为避免改变 prop，最好定义一个使用 prop 作为初始值的本地数据属性 (source)：

props: ['date'],
data () {
  return {
    localDate: this.date
  }
}

现在您可以将localDate 数据用作v-model，并且您的emitAnswer 方法不需要任何参数：

//template
  <input @change="emitAnswer" v-model="localDate">

//script
props: ['date'],
data () {
  return {
    localDate: this.date
  }
},
methods: {
  emitAnswer () {
    this.$emit('myFunc', this.localDate)
  }
}

【讨论】：