vue中直接修改父级传过来的值会直接报错

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

这里主要记录 通过组件传值的方式显示弹窗

---

一、什么是组件

组件其实是指具有特定功能的标签

二、父组件向子组件传值

1. 新建组件MyComponent（子组件）

2. 在父组件中引入子组件

代码如下（示例）：

<template>
  <div class="box">
     <el-button type="text" @click="showDialog = true">打开弹窗</el-button>
     <MyComponent :show.sync="showDialog" />
  </div>
</template>
<script>
import MyComponent from './component/MyComponent.vue'
export default {
  components: {
    MyComponent
  },
  data() {
    return {
      showDialog: false,
    };
  },
  methods: {
   }
};

3.在子组件中获取传值

通过props来接受父级传过来的参数

1.第一种方式

使用computed监听show的值

<template>
  <div class="dialog-box">
    <el-dialog title="收货地址" :visible="showDialog" @close="onClose">
      <el-form :model="form">
        <el-form-item label="活动名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="活动区域" :label-width="formLabelWidth">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showDialog = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  //接收传值
  props: {
    show: {
      type: Boolean,
      default: false,
    }
  },
  components: {},
  data() {
    return {
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px',
    }
  },
  mounted() {

  },
  computed: {
    showDialog: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit('update:show', val);
      }
    }
  },
  methods: {
  },
}

2.第二种方式

使用watch来监听show的值

<template>
  <div class="dialog-box">
    <el-dialog title="收货地址" :visible="showDialog" @close="onClose">
      <el-form :model="form">
        <el-form-item label="活动名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="活动区域" :label-width="formLabelWidth">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="onClose">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  //接收传值
  props: {
    show: {
      type: Boolean,
      default: false,
    }
  },
  components: {},
  data() {
    return {
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px',
      showDialog: false,
    }
  },
  mounted() {

  },
  watch: {
    show(val) {
      this.showDialog = val;
    }
  },
  methods: {
    // ==================================== 一、逻辑类 ====================================
    onClose() {
      this.$emit('update:show', false);
    }
  },
}

---

总结

1. 子组件是不能直接修改父级传过来的值的
2. 要修改父级传过来的值要放在computed 或 watch中去监听
3. 值修改后要通过 this.$emit (‘update:show’,false) 去刷新值，否则会报错