子组件调用父组件的方法修改父组件中的数据

父组件传递给子组件的值被子组件修改时会报错

Vue 不推荐直接在子组件中修改父组件传来的 props 的值，会报错

[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: "result" (found in component )

因为子组件不能修改父组件传递过来的数据，所以若想让子组件修改父组件的数据，只能让子组件发送一个请求，这个请求是让父组件自己调用自己的方法来修改数据；通过这种方式，达到子组件修改父组件数据的要求。

案例：

我通过 v-if=“showMoveSlotDialog” 来控制子组件<SlotDiaglog>的显示，<SlotDiaglog>是一个弹窗，当 showMoveSlotDialog 为 true 时，该弹窗显示；

但是现在有一个问题，就是怎样关闭弹窗，因为打开弹窗后我就只能操作弹窗组件，无法操作父组件，而控制弹窗显隐的变量是父组件中的 showMoveSlotDialog ，这个变量是父组件中的数据；我无法通过弹窗（子组件）操作改变外面组件（父组件）中的数据（showMoveSlotDialog）。

这时我想到让子组件发送一个请求，这个请求是让父组件自己调用自己的方法来修改数据。



当我点击弹窗中的取消按钮时，调用子组件中的cancel方法：



该方法中通过 this.$emit(‘changeSlotDialogShow’) 给父组件发送了一个调用 changeSlotDialogShow() 方法的请求：



父组件调用 changeSlotDialogShow() 方法，将 this.showMoveSlotDialog = ！this.showMoveSlotDialog 来控制弹窗（子组件）的显隐；当 this.showMoveSlotDialog === false ，即弹窗隐藏时，刷新父组件（this.refresh()）。