VUE父子组件监听状态变化

小程序交流群：609690978

在不使用VUEX的情况下，通过props传值，父组件直接修改子组件的相关数据会报错。
这里以父组件弹框为例讲一下如何操作……

父组件html

<father 
	@changingType="showDialog" 
	:showPopup="showPopup" 
>
</father >

父组件 js

export default{
	data(){
		return(){
			showPopup:false
		}
	}
}

methods:{
	 showDialog(data){
        console.log("父监听子",data)
        if(data == false){
            this.showPopup = false;
        }else{
            this.showPopup = false;
        }
      }
}

子组件html

<div  v-if="dialogVisible"></div>

子组件JS

export default{
	props:['showPopup'],
	data(){
		return{
			dialogVisible:this.showPopup
		}
	}
},
watch:{
    showPopup(cur){//监听showPopup值的变化
        console.log('子:'+cur)
        if(cur == true){//当父组件传递值为true是，则显示
           this.dialogVisible = true;
        }else{
            this.dialogVisible =false
        }
      }
 },

methods:{
      close() {
          this.$emit('changingType','false');//调用父组件的自定义事件，并传值
      }
}

小程序交流群：609690978