Uma explicação muito detalhada do fluxo de dados unilateral dos componentes vue pai-filho passando valores (1)

Há um componente DialogInfo: o componente pai passa o valor para o componente filho visível e

clica para adicionar o valor de dialogTableVisible: Nesse

caso, um erro será relatado no tempo de execução:

Solução:

<template>
  <el-dialog title="收货地址" :visible.sync="visible_flag" v-on:close="handleClose" :modal-append-to-body="false">
    <el-table>
      <el-table-column property="date" label="日期" width="150"></el-table-column>
      <el-table-column property="name" label="姓名" width="200"></el-table-column>
      <el-table-column property="address" label="地址"></el-table-column>
    </el-table>
  </el-dialog>
</template>
<script>
export default {
    
    
  name: "DialogInfo",
  props: {
    
    
    visible: Boolean
  },
  watch: {
    
    
    visible: {
    
    
      handler(newValue, oldValue){
    
    
        this.visible_flag = newValue
        console.log(`old value ${
      
      oldValue} --------> new value ${
      
      newValue}`);
      }
    }
  },
  methods: {
    
    
    handleClose() {
    
    
      this.$emit("changeStatusHide", false)
    }
  },
  data() {
    
    
    return {
    
    
      visible_flag: false
    }
  }
};
</script>
<style lang="scss" scoped>
</style>

1. Declare uma variável sua nos dados do componente filho visible_flag, o valor padrão é o valor padrão falso passado pelo componente pai
2. Ao mesmo tempo visible_flagvincule ao el-dialogrótulo:

3. watchMonitorando o valor passado pelo componente pai visiblee chamando o handlermétodo para ouvir o pai Os valores novos e antigos do componente e, em seguida, modificar seu valor de atributo para se manter em sincronia visible_flagcom o novo valor passado pelo componente pai newValue:

Vamos resolver: o
parâmetro padrão passado pelo componente pai para o componente filho é falso:

uma vez que o novo botão é clicado:

dialogTableVisibleo valor é alterado para O
componente filho verdadeiro visiblerecebe os parâmetros passados ​​pelo componente pai, e o monitoramento visible

descobriu que o visível passado do componente pai foi alterado de falso para verdadeiro, então o manipulador é acionado e o próprio valor visible_flag do componente filho é alterado para o novo valor verdadeiro, então a caixa de diálogo é exibida:

mas após clicar em fechar caixa de diálogo, não importa como você clique no botão, você não pode troque a caixa de diálogo, porque quando você clicar nela, você apenas repetirá as configurações: de

modo que os subcomponentes não possam monitorar as mudanças de parâmetros de entrada e não farão qualquer reação

Finalmente, o que precisamos fazer é fazer com que cada filho ouça a montagem do componente pai por valor, e mais tarde emendou seu visible_flag, espere até que o usuário feche a caixa de diálogo (a caixa de diálogo irá disparar close事件), disse ao componente pai, ei cara, você deve colocar dialogTableVisibleo O valor é alterado de volta para falso!

Como o componente filho não pode modificar o valor do componente pai (limitação de fluxo de dados unilateral), o componente filho só pode $emitdizer ao componente pai para modificar o valor emitindo um evento:

Clique para fechar o diálogo fechar o evento é acionado quando a função de retorno de chamada handleClose:

na handleClosesubmontagem, diga ao componente pai: Ei, vamos lá, você pode fazer sobre isso changeStatusHide? Coisa e eu lhe darei um false

componente pai de valor aqui, ouvindo o sub -conjuntos para emitir sobre seus próprios Um evento changeStatusHide:

Em seguida, chame a função de retorno de chamada change () e use o valor false passado pelo componente filho para definir o valor de seu próprio atributo dialogTableVisible como false:

Desta forma, pode ser garantido que da próxima vez que o botão for clicado, o componente filho monitora o parâmetro passado pelo componente pai para mudar: de falso-> verdadeiro