A very detailed explanation of the one-way data flow of vue parent-child components passing values (1)

There is a DialogInfo component: The parent component passes the value to the child component visible and

clicks to add the value of dialogTableVisible: In

this case, an error will be reported at runtime:

Solution:

<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 a variable of your own in the child component data visible_flag, the default value is the default value false passed in by the parent component
2. At the same time visible_flagbind to the el-dialoglabel:

3. By watchmonitoring the value passed by the parent component visible, and calling the handlermethod to monitor the parent The new and old values ​​of the component, and then modify its attribute value to keep in sync visible_flagwith the new value passed in by the parent component newValue:

Let’s sort it out: the
default parameter passed by the parent component to the child component is false:

once the new button is clicked:

dialogTableVisiblethe value is changed to The true
child component visiblereceives the parameters passed by the parent component, and the monitoring visible

found that the visible passed from the parent component has changed from false to true, so the handler is triggered to change the child component’s own visible_flag value to the new value true , So the dialog is displayed:

but after clicking close dialog, no matter how you click the button, you can’t swap out the dialog, because when you click it, you will only repeat the settings:

so that the sub-components can’t monitor the incoming parameter changes, and will not make any reaction

Finally, we need to do is to make every child listens to the parent component assembly by value over, and later amended their visible_flag, wait until the user closes the dialog (the dialog will trigger close事件), told the parent component, hey man, you should put dialogTableVisiblethe The value is changed back to false!

Because the child component cannot modify the value of the parent component (one-way data flow limitation), the child component can only $emittell the parent component to modify the value by emitting an event:

Click to close the dialog close event is triggered when the callback function handleClose:

in handleClosethe subassembly tell the parent component: Hey, come on, can you do about this changeStatusHide? Thing and I'll give you a value false

parent component here, listening to the sub-assemblies to emit over their own An event changeStatusHide:

Then call the callback function change(), and use the value false passed by the child component to set the value of its own attribute dialogTableVisible to false:

In this way, it can be ensured that the next time the button is clicked, the child component monitors the parameter passed by the parent component to change: from false->true