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

最新推荐文章于 2024-08-16 14:39:56 发布

sunlizhen

最新推荐文章于 2024-08-16 14:39:56 发布

阅读量3.2k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/sunlizhen/article/details/106120579

版权

本文介绍了在Vue中如何修改父组件通过props传递的值，并使用watch监听props的变化，确保子组件内相应变量能同步更新。通过设置一个内部变量nextClickInner接收props值，并在watch中监听nextClick的变化，实现状态同步。

摘要由CSDN通过智能技术生成

父组件

<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
    };
  },