element ui dialog 父子組件傳值

最近在做課設的時候 用到了Elementui 中的dialog的組件，但在將dialog作為一個子組件的時候，傳值出現了問題。當關閉dialog的時候應該怎么傳值?

一開始的時候的想法比較簡單，就是父組件直接傳值來作為子組件的show/hidden的值。

然而這樣的問題是當子組件close的時候，他會直接直接改變他的值，但是子組件不能直接改變props的值，因此可以通過子組件觸發事件給父組件。

子組件在關閉時候的事件，通過閱讀官方文檔，我們發現他提供了一個關閉的時候的回調事件。

我們可以通過@close=“相應事件”來寫需要給子組件傳的事件。

父組件：

<el-button style="float: right; padding: 3px 8px" type="text" @click="report(item)">舉報</el-button>
<accuse :accuseitem="accuseitem" :accuseVisible="accuseVisible" @close-dialogStatus="close_dialog"></accuse>
export default {
  name: 'home',
  data () {
    return {
      accuseitem: {},
      accuseVisible: false
  },
  methods: {
   close_dialog (val) {
      this.accuseVisible = false
    },
    report (item) {
      this.accuseitem = item
      this.accuseVisible = true
    }
  }
}

子組件

 <el-dialog
      custom-class="m-dialog"
      :visible.sync="vis"
      width="100%"
      top="0px"
      @close="closeDialog"
      :show-close="true"
      >
    </el-dialog>
export default {
    name: '',
    data () {
        return {
          vis: false
        }
    },
    props: {
        accuseVisible: Boolean,
        accuseitem: Object
    },
    watch: {
        accuseVisible (newValue, oldValue) {
          this.vis = newValue
        }
    },
    methods: {
        closeDialog () {
          this.$emit('close-dialogStatus', true)
        }
    }
}

站在巨人的肩膀上摘蘋果:

https://blog.csdn.net/qq_37021554/article/details/85081786