The question about props

A dialog box is made with element. The visible.sync property value that pops up in the dialog box is controlled by props to receive the value from the parent component. It functions normally at first, but it will give a warning when you click to close the dialog box. The reason is that the close button that comes with elemen changes the method of using variable to replace props, but finds that it cannot be switched normally. 

<template>
  <el-dialog title="" :visible.sync="visible">
  <el-table :data="gridData">
    <el-table-column property="date" label=""></el-table-column>
    <el-table-column property="name" label=""></el-table-column>
    <el-table-column property="detail" label=""></el-table-column>  
  </el-table>
</el-dialog>
</template>

<script>
  export default{
    props:["dialogTableVisible","gridData"],
    data(){
      return {
        visible:this.dialogTableVisible
      }
    }
  }
</script>
Vue.js javascript
Feb.24,2022

the control component displays the parameters passed in the parent component 

<el-dialog title="" :visible.sync="dialogTableVisible">

listen for one of its shutdown events 

<el-dialog title="" :visible.sync="dialogTableVisible" @close="handleClose">
methods: {
    handleClose(value){
        this.$emit('close', value);
    }
}

listen for close events from child components emit in the parent component 

<child @close="handleClose" :dialogTableVisible="dialogTableVisible" />
methods: {
    handleClose(value){
        console.log(value);
       //  dialogTableVisible 
       this.dialogTableVisible = value;
    }
}

you only give an initial value to visible . When the parent component changes the value of dialogTableVisible later, the child component will not be updated. 

data(){
  return {
    visible:this.dialogTableVisible
  }
}

Previous: I want to jump to a page and set up the information in header and pass it to the new page together. Is there such an operation? If so, how to achieve it?

Next: Prompts Instance member is not accessible when developing NodeJS, with Webstorm to call the built-in API.

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu