vue子組件改變父組件傳遞prop值通過sync實現數據雙向綁定的示例分析

小編給大家分享一下vue子組件改變父組件傳遞prop值通過sync實現數據雙向綁定的示例分析，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

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的值，解決報錯。

Vue的優點

Vue具體輕量級框架、簡單易學、雙向數據綁定、組件化、數據和結構的分離、虛擬DOM、運行速度快等優勢，Vue中頁面使用的是局部刷新，不用每次跳轉頁面都要請求所有數據和dom，可以大大提升訪問速度和用戶體驗。

看完了這篇文章，相信你對“vue子組件改變父組件傳遞prop值通過sync實現數據雙向綁定的示例分析”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！