Parent-child component value transfer between vue+elementUI dialog pop-up window and page

Project scenario:

(As shown in the picture below) For the needs encountered when doing the background, click the button to pop up a pop-up window, fill in some information and submit it, because there are too many information to be filled in the pop-up window, in order to keep the code of this page from being too long, so the pop-up window Separately encapsulated into components, control the opening and closing of the pop-up window by passing values ​​from parent to child

---

Stepping on the pit:

Use props and $emit as a way to pass values ​​between parent and child

1. watch only works when the first passed value changes
2. Son to father has not worked
   

---

Cause Analysis:

After careful study, I found that because I use the value passed from the parent component as the condition for whether the pop-up window pops up, I change the value after popping up and pass it back, but because **vue does not recommend directly modifying the props passed from the parent component in the child component The value of the value will report an error**, which will cause the child component to fail to modify the value, so the value in the parent component has not been changed, and the monitoring will not work

---

solution:

Just define a new value in the life cycle of the child component created to replace the value passed from the parent component. The code is directly added below.

Parent page, use import to register child components, and define

<template>
 <div>
   …………
   // 自定义的组件**new-channel-dialog**，这个名字要和子组件的name相同mopenKey是传给子组件的值， 
   // loseNewChannel事件用于接收子组件的回调
   <new-channel-dialog :open-key="openKey" @closeNewChannel="closeNewChannel" />
  </div>
</template>

import newChannelDialog from './newChannelDialog.vue' // 这个路径看你自己写的位置
export default {
    
    
  components: {
    
    
    newChannelDialog
  },
  data() {
    
    
    return {
    
    
      openKey: 0,  // 设置传值的初始值为0
      …………
      }
     }
  
  …………
  
 // 这里写两个事件
 // 打开弹窗事件，在点击按钮的时候触发，触发后改变openKey的值，传给子组件
    openDialog() {
    
    
      this.openKey = 1 
    },
  // 关闭弹窗的回调
    closeNewChannel(data) {
    
    
      console.log(data) // 这里的data是子组件传回来的值，对应的就是子组件传过来的newOpenKey
      this.openKey = data
    }
 }

Subpage,

// 写props用于接收父组件的传值
export default {
    
    
  props: {
    
    
    openKey: {
    
    
      type: Number, //类型
      required: true
    }
  },
  data() {
    
    
    return {
    
    
      newOpenKey: '',  //定义一个新字段替换父组件传的字段
      …………
      }
   },
   // watch监听传值的变化
   watch: {
    
    
    openKey: {
    
    
      deep: true,
      immediate: true,
      handler: function(val) {
    
    
        if (val === 0) {
    
    
          return // 为0的时候不做改变
        } else if (val === 1) {
    
    
          //  为1的时候唤醒弹窗
          …………
        }
      }
    }
  },
  // 在这里用新定义的字段替换传来的字段
  created() {
    
    
    this.newOpenKey = this.openKey
  },
   methods: {
    
    
    // 关闭弹窗事件
    closeNewChannel() {
    
    
      this.newOpenKey = 0 // 将值改回初始
      this.$emit('closeNewChannel', this.newOpenKey) // emit事件通知父组件
    // 格式： this.$emit('父组件的事件名', '要传的值')
      …………
    },
    …………
    }