vue 修改props父组件传过来的值

父组件

<Temp :ruleForm="ruleForm" :nextClick="nextClick" :prevClick="prevClick" @next="nextOuter"></Temp>

// 子组件
<template>
  <div class="wrapInner" >
      <el-button @click="nextInner" :disabled="nextClickInner">下一步1</el-button>
      <el-button @click="prevInner" :disabled="prevClick">上一步1</el-button>
      <el-button @click="resetInner">重置1</el-button>
  </div>
</template>

<script>
export default {
  name: 'temp',
  props: {
    ruleForm: {
      type: Object
    },
    nextClick: {
      type: Boolean
    },
    prevClick: {
      type: Boolean
    }
  },
  data: function () {
    return {
      num: 0,
      nextClickInner: this.nextClick
    };
  },
  watch:{
    nextClick: function (val) {
      this.nextClickInner = val
    }
  },
  computed: {

  },
  mounted: function () {
      console.log(this.nextClick)
      console.log(this.nextClickInner)
  },
  methods: {
    // 下一步
    nextInner() {
      console.log(this.ruleForm)
      if (this.ruleForm.checkList .length === 0 || this.ruleForm.checkList .length < 2 || this.ruleForm.checkList .length > 3) {
        // this.nextClick = true
      }
      this.num++;
      this.$emit('next', this.num)

    },
    // 上一步
    prevInner() {

    },
    // 重置
    resetInner() {

    }

  }
}

 使用一个变量nextClickInner去接收,子组件就可以满足对父组件传过来的值进行操作了.
但是这样还是会存在一个问题,nextClickInner这个属性只会在组件被创建的时候赋一次值,后续如果nextClick这个props值有变化,nextClickInner并不会自动同步,这时候就需要引入vue的一个属性监听函数；放在watch里面

watch:{ nextClick: function (val) { this.nextClickInner = val } }

watch的作用可以监控一个值的变换，并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态。