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

Posted 2023-02-05 kaolagirl

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

文章目录

• 前言
• 一、什么是组件
• 二、父组件向子组件传值
• • 1. 新建组件MyComponent（子组件）
  • 2. 在父组件中引入子组件
  • 3.在子组件中获取传值
  • • 1.第一种方式
    • 2.第二种方式
• 总结

---

前言

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

---

一、什么是组件

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

二、父组件向子组件传值

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) 去刷新值，否则会报错