问题:子组件想修改父组件传来的值(props中的值)。普通的修改会报错,因为这个值是单向的,只能传进来,要是想修改就要用v-model
解决办法:用v-model
写个简单粗暴例子:
父组件
<control :lingthData="lingthData" v-model="deviceF"></control>
//v-model里面写上我们要传给子组件,并且还会在子组件中改变这个值
import control from '@/page/map/control'
export default {
components: {
control
},
data () {
return {
deviceF: true
}
}
子组件
<template>
<div>
{{device}}
<div @click="look">改变值</div>
</div>
</template>
<script>
export default {
data () {
return {
device: this.value, //定义一下
}
},
props: ['lingthData', 'value'],//因为想要改变device,所以device要写成value,这里是写死的
components: {
},
methods: {
look () {
this.device = !this.device
this.$emit('input', this.device) //这样this.device就会被修改;前面的input是固定写死的
}
}
}
</script>
具体为什么这么写,vue文档里有交待=》