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

更新時(shí)間：2020年02月01日 10:22:34 作者：瑪咖

本文通過(guò)一個(gè)demo給大家介紹了vue子組件改變父組件傳遞的prop值通過(guò)sync實(shí)現(xiàn)數(shù)據(jù)雙向綁定,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

最近開(kāi)始在用elementUI做一個(gè)后臺(tái)管理系統(tǒng)項(xiàng)目，遇到一個(gè)問(wèn)題，需求是這樣，在父組件有一個(gè)按鈕，點(diǎn)擊按鈕會(huì)顯示彈窗（子組件），在子組件中用的是elementUI 的el-diolog彈窗組件，在關(guān)閉彈窗時(shí)（elementUI自帶事件）便會(huì)報(bào)錯(cuò)。話不多說(shuō)直接上代碼。

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ù)寫了:

<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ò)。

原理

很多時(shí)候我們需要在子組件中修改prop的值，這樣就破壞了vue的單項(xiàng)數(shù)據(jù)流，利用vue2.3的sync可以實(shí)現(xiàn)數(shù)據(jù)的雙向綁定，這是官方解釋 https://cn.vuejs.org/v2/guide... ，使用方式也很簡(jiǎn)單。

總結(jié)

以上所述是小編給大家介紹的vue子組件改變父組件傳遞的prop值通過(guò)sync實(shí)現(xiàn)數(shù)據(jù)雙向綁定，希望對(duì)大家有所幫助！

您可能感興趣的文章: