vue子組件改變父組件傳遞的prop值，sync實現數據雙向綁定

最近開始在用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,
            default: false,
          }
        },
           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... ，使用方式也很簡單。
————————————————
版權聲明：本文爲CSDN博主「包子是隻貓」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處連接及本聲明。
原文連接：https://blog.csdn.net/qq_3495...