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

©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页