最近開始在用elementUI做一個後臺管理系統專案，遇到一個問題，需求是這樣，在父元件有一個按鈕，點選按鈕會顯示彈窗（子元件），在子元件中用的是elementUI 的el-diolog彈窗元件，在關閉彈窗時（elementUI自帶事件）便會報錯。話不多說直接上程式碼。

DEMO

這是父元件的程式碼：

<template>
  <div>
     <app-refund :dialogVisible="refundVisible"></app-refund>
    // 下面是一個按鈕，點選此按鈕會觸發refundFunc，並顯示彈窗
     <el-dropdown-item @click.native="refundFunc">點選此按鈕顯示彈窗</el-dropdown-item>
  </div>
</template>
<script>
import refund from '@/pages/customer/refund'
export default {
  components: {
     "app-refund":refund
  },data(){
    return {
      refundVisible:false
    }
  },methods: {
   refundFunc:function(){
    this.refundVisible=true
    }
    }
}
</script>

以下是子元件的程式碼,為了使程式碼看起來更方便簡潔，已經把其他冗餘的程式碼刪除，只留下能實現功能的必要程式碼

<template>
 <div>
 <el-dialog
   title="退餘額"
  :visible.sync="dialogVisible"
  width="630px">
  </el-dialog>
 </div>
</template>
<script>
   export default { 
     props:{
     dialogVisible: {
      type:Boolean,default: false,}
    },}
</script>

以上便是父元件控制子元件的顯示，而在子元件關閉彈窗的例子，這樣肯定是不行的，因為在vue中props資料是單向流，不能在子元件改變父元件傳過來的prop值，而解決方式就是用emit來更新prop值，解決方案如下。

父元件程式碼，js部分和上面一模一樣，這裡就不重複寫了:

<template>
  <div>
     <app-refund :dialogVisible.sync="refundVisible"></app-refund>
    // 下面是一個按鈕，點選此按鈕會觸發refundFunc，並顯示彈窗
     <el-dropdown-item @click.native="refundFunc">點選此按鈕顯示彈窗</el-dropdown-item>
  </div>
</template>

子元件程式碼：

<template>
 <div>
 <el-dialog
   title="退餘額"
  :visible.sync="dialogVisible"
  :before-close="hidePanel"
  width="630px">
  </el-dialog>
 </div>
</template>
<script>
   export default { 
     props:{
     dialogVisible: {
      type:Boolean,methods: { 
     // 利用sync進行資料雙向繫結，子元件修改dialogVisible的值，並響應到父元件
     hidePanel() {
       this.$emit('update:dialogVisible',false)
     }
    },}
</script>

這裡用到了elementUI的before-close方法，是彈窗關閉前的回撥，用在這裡的意思是在element自帶的關閉彈窗方法之前呼叫hidePanel方法，由我們來控制彈窗的關閉，這樣就能在關閉時更新dialogVisible的值，解決報錯。

原理

很多時候我們需要在子元件中修改prop的值，這樣就破壞了vue的單項資料流，利用vue2.3的sync可以實現資料的雙向繫結，這是官方解釋https://cn.vuejs.org/v2/guide... ，使用方式也很簡單。

總結

以上所述是小編給大家介紹的vue子元件改變父元件傳遞的prop值通過sync實現資料雙向繫結，希望對大家有所幫助！