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/