vue 子组件修改props中的值

问题：子组件想修改父组件传来的值（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文档里有交待=》

https://cn.vuejs.org/v2/guide/components.html#%E5%9C%A8%E7%BB%84%E4%BB%B6%E4%B8%8A%E4%BD%BF%E7%94%A8-v-model

 

如果我写的没看懂，没关系，这里还有个线上例子=》

https://jsfiddle.net/d502zdxk/613/