2

用element做了个对话框,控制对话框弹出的visible.sync属性值由props接收父组件传来的值,一开始功能正常,但是在点击关闭对话框的时候会产生警告,原因是elemen自带的关闭按钮操作了props,遂改变方法使用变量替代props,但是发现无法正常切换,求解答

<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>
2018-12-19 提问
2 个回答
2

已采纳

控制组件显示的还是用父组件中传的参数

<el-dialog title="收货地址" :visible.sync="dialogTableVisible">

监听一个它的关闭事件

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

父组件中再监听子组件emit出来的close事件

<child @close="handleClose" :dialogTableVisible="dialogTableVisible" />
methods: {
    handleClose(value){
        console.log(value);
       // 在这里修改 dialogTableVisible 的值
       this.dialogTableVisible = value;
    }
}
0

你这样赋值只是给了visible一个初始值,当以后父组件改变了dialogTableVisible的值的时候,子组件是不会随着更新的。

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

撰写答案

推广链接