vue中子组件修改父子变量报错问题

通过子组件中变量变化 修改父页面中变量报如下错：

  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: "XXX"

解决方案：

1、父页面中 

<template>  
    <train-city @ChangeName="ChangeName" :isData=" isOpen"></train-city>  
<template>  
<script>  
  import TrainCity from "./train-city";  
  export default {  
    name:'index',  
    components: {TrainCity},  
    data () {  
      return {  
        isOpen:false 
      }  
    },  
    methods:{  
      ChangeName(data){   //在子组件触发的事件  
        this.isOpen= data.isOpen;//改变了父组件的值  
      }  
    }  
  }  
</script>

组件中

<template>  
  <div class="stuts">  
    <br/><button @click='select(`true`)'>点击事件</button>  
  </div>  
</template>  
<script>  
  export default {  
    name:'trainCity',  
    props:['isData'], // 用来接收父组件传的值  
    methods:{  
      changeVal(val) {  
        let data = {  
          isOpen: val  
        };  
        this.$emit('ChangeName',data);触发ChangeName事件  
      }  
    }  
  }  
</script>

 

2、如果条件允许可以直接在组件中定义变量