Vue Element-UI dialog作为子组件，怎么在父组件里控制dialog的显示与隐藏？

Question

小白，请教各位个问题：

子组件

<template>
  <el-dialog title="收货地址" :visible.sync="dialogTableVisiblee" @close="close">
    <el-table :data="gridData">
      <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 {
  props: {
    dialogTableVisiblee: Boolean
  },
  data () {
    return {
      gridData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }]
    }
  },
  methods: {
    close () {
      this.$emit('dialogHide')
    }
  }
}
</script>

父组件

<template>
  <div class="wrap">
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <modal @dialogHide="dialogHanderHide" :dialogTableVisiblee="isShow"></modal>
  </div>
</template>
<script>
import modal from './modal'
export default {
  data () {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        member: 1,
        invited: 77,
        id: 789,
        address: '上海市普陀区金沙江路 1518 弄'
      },],
      isShow: false
    }
  },
  components: {
    modal
  },
  methods: {
    handleClick (row) {
      this.isShow = true
      // console.log(row)
    },
    dialogHanderHide () {
      this.isShow = false
    }
  }
}
</script>

点击查看倒是可以实现效果，但是报错

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "dialogTableVisiblee"

found in

---> <Modal> at src\components\modal.vue
       <Index> at src\components\index.vue
         <App> at src\App.vue
           <Root>

Answer 1

在你的父组件里model 标签添加一个接收子组件传递的数据方法@CB-dialog="CB_dialog"，在方法里把你的 dialogTableVisiblee改成false,子组件里关闭方法用this.$emit('CB-dialog',false)向父组件传值，还有你的子组件props图片描述:['dialogTableVisiblee'],在watch监听变化，赋给你的子组件页面的值，不要绑定同一个，会干扰

Answer 2

# 2个方法

第一个 ：

// 父组件
<dialog-apply :visible.sync="dialogApplyVisible" />

// 子组件
<el-dialog
      :visible.sync="visible"
      title="申请"
      :before-close="onClose"
>

onClose() {
  this.$emit('update:visible', false)
}

第二个 ：

// 父组件
<dialog-apply :visible.sync="dialogApplyVisible" @close='dialogApplyVisible = false' />

// 子组件
<el-dialog
      :visible.sync="visible"
      title="申请"
      :before-close="onClose"
>

onClose() {
  this.$emit('close')
}

---

这2个方法 ， :before-close 是关键 ；

Answer 3

用vuex，设置一个状态，弹框根据这个状态的值来显示或者隐藏