vue警告：子组不允许件修改父组件传入的数据

vue

 2017/12/04

父组件，子组件（一个填表单数据的弹窗）

方法一

props传递数据不是双向绑定的，而是单向数据流，父组件的数据变化时，也会传递到子组件中，这就意外着我们不应该在子组件中修改props。所以我们在关闭弹窗的时候就需要通过$emit来修改父组件的数据，然后数据会自动传到子组件中。

所以弹窗的关闭事件，涉及到子组件往父组件传参，

Vue中在子组件往父组件传参，很多都是通过$emit来触发父组件的事件来修改数据。

在子组件中，在点击关闭，或者遮罩层的时候触发下面这个方法：

methods: {
	closeMyself() {
		this.$emit("on-close"); 
		//如果需要传参的话，可以在"on-close"后面再加参数，然后在父组件的函数里接收就可以了。
	}
}

父组件中的写法：

<dialogComponent :is-show="status.isShowPublish" :top-distance="status.topNum"  @on-close="closeDialog"> 
</dialogComponent>
//"on-close是监听子组件的时间有没有触发，触发的时候执行closeDialog函数
methods:{
  closeDialog(){
    // this.status.isShowPublish=false;
    //把绑定的弹窗数组 设为false即可关闭弹窗
  },
}

方法二

https://segmentfault.com/q/1010000005345202

CATALOG

1. 方法一
2. 方法二

