問題：子元件想修改父元件傳來的值（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/