Transferencia de valor del componente padre-hijo entre la ventana emergente y la página del cuadro de diálogo vue+elementUI

Escenario del proyecto:

(Como se muestra en la imagen a continuación) Para las necesidades encontradas al hacer el fondo, haga clic en el botón para abrir una ventana emergente, complete alguna información y envíela, porque hay demasiada información para completar en la ventana emergente. ventana emergente, para evitar que el código de esta página sea demasiado largo, por lo que la ventana emergente Encapsulada por separado en componentes, controle la apertura y el cierre de la ventana emergente pasando valores de padre a hijo

---

Pisar el foso:

Use props y $emit como una forma de pasar valores entre padres e hijos

1. el reloj solo funciona cuando cambia el primer valor pasado
2. Hijo a padre no ha trabajado
   

---

Análisis de causa:

Después de un estudio cuidadoso, descubrí que debido a que uso el valor pasado del componente principal como condición para que aparezca la ventana emergente, cambio el valor después de aparecer y lo devuelvo, pero porque **vue no recomienda modificando directamente los accesorios pasados ​​del componente principal en el componente secundario El valor del valor informará un error**, lo que hará que el componente secundario no pueda modificar el valor, por lo que el valor en el componente principal no se ha cambiado, y el monitoreo no funcionará

---

solución:

Simplemente defina un nuevo valor en el ciclo de vida del componente secundario creado para reemplazar el valor pasado del componente principal. El código se agrega directamente a continuación.

Página principal, utilice la importación para registrar componentes secundarios y defina

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

subpágina,

// 写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('父组件的事件名', '要传的值')
      …………
    },
    …………
    }