vue子組件改變父組件傳遞prop值通過(guò)sync實(shí)現(xiàn)數(shù)據(jù)雙向綁定的示例分析

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

DEMO

這是父組件的代碼：

<template>
  <div>
     <app-refund :dialogVisible="refundVisible"></app-refund>
    // 下面是一個(gè)按鈕，點(diǎn)擊此按鈕會(huì)觸發(fā)refundFunc，并顯示彈窗
     <el-dropdown-item @click.native="refundFunc">點(diǎn)擊此按鈕顯示彈窗</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>

以下是子組件的代碼,為了使代碼看起來(lái)更方便簡(jiǎn)潔，已經(jīng)把其他冗余的代碼刪除，只留下能實(shí)現(xiàn)功能的必要代碼

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

以上便是父組件控制子組件的顯示，而在子組件關(guān)閉彈窗的例子，這樣肯定是不行的，因?yàn)樵趘ue中props數(shù)據(jù)是單向流，不能在子組件改變父組件傳過(guò)來(lái)的prop值，而解決方式就是用emit來(lái)更新prop值，解決方案如下。

父組件代碼，js部分和上面一模一樣，這里就不重復(fù)寫(xiě)了:

<template>
  <div>
     <app-refund :dialogVisible.sync="refundVisible"></app-refund>
    // 下面是一個(gè)按鈕，點(diǎn)擊此按鈕會(huì)觸發(fā)refundFunc，并顯示彈窗
     <el-dropdown-item @click.native="refundFunc">點(diǎn)擊此按鈕顯示彈窗</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進(jìn)行數(shù)據(jù)雙向綁定，子組件修改dialogVisible的值，并響應(yīng)到父組件
     hidePanel() {
       this.$emit('update:dialogVisible', false)
     }
    },
  }
</script>

這里用到了elementUI的before-close方法，是彈窗關(guān)閉前的回調(diào)，用在這里的意思是在element自帶的關(guān)閉彈窗方法之前調(diào)用hidePanel方法，由我們來(lái)控制彈窗的關(guān)閉，這樣就能在關(guān)閉時(shí)更新dialogVisible的值，解決報(bào)錯(cuò)。

Vue的優(yōu)點(diǎn)

Vue具體輕量級(jí)框架、簡(jiǎn)單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢(shì)，Vue中頁(yè)面使用的是局部刷新，不用每次跳轉(zhuǎn)頁(yè)面都要請(qǐng)求所有數(shù)據(jù)和dom，可以大大提升訪問(wèn)速度和用戶(hù)體驗(yàn)。

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