通过子组件中变量变化 修改父页面中变量报如下错:
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、如果条件允许可以直接在组件中定义变量