VUE里子組件怎樣獲取父組件動態(tài)變化的值-創(chuàng)新互聯(lián)

小編給大家分享一下VUE里子組件怎樣獲取父組件動態(tài)變化的值，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)公司是網(wǎng)站建設(shè)專家,致力于互聯(lián)網(wǎng)品牌建設(shè)與網(wǎng)絡(luò)營銷，專業(yè)領(lǐng)域包括成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、外貿(mào)網(wǎng)站建設(shè)、電商網(wǎng)站制作開發(fā)、小程序設(shè)計(jì)、微信營銷、系統(tǒng)平臺開發(fā)，與其他網(wǎng)站設(shè)計(jì)及系統(tǒng)開發(fā)公司不同，我們的整合解決方案結(jié)合了恒基網(wǎng)絡(luò)品牌建設(shè)經(jīng)驗(yàn)和互聯(lián)網(wǎng)整合營銷的理念，并將策略和執(zhí)行緊密結(jié)合，且不斷評估并優(yōu)化我們的方案，為客戶提供全方位的互聯(lián)網(wǎng)品牌整合方案！

在VUE里父組件給子組件間使用props方式傳遞數(shù)據(jù)，但是希望父組件的一個狀態(tài)值改變?nèi)缓笞咏M件也能監(jiān)聽到這個數(shù)據(jù)的改變來更新子組件的狀態(tài)。

場景：子組件通過props獲取父組件傳過來的數(shù)據(jù)，子組件存在操作傳過來的數(shù)據(jù)并且傳遞給父組件。

比如想實(shí)現(xiàn)一個switch開關(guān)按鈕的公用組件：

1.父組件可以向按鈕組件傳遞默認(rèn)值。

2.子組件的操作可以改變父組件的數(shù)據(jù)。

3.父組件修改傳遞給子組件的值，子組件能動態(tài)監(jiān)聽到改變。

比如父組件點(diǎn)擊重置，開關(guān)組件的狀態(tài)恢復(fù)為關(guān)閉狀態(tài)：

方法1：

1、因?yàn)榇嬖谧咏M件要更改父組件傳遞過來的數(shù)據(jù)，但是直接操作props里定義的數(shù)據(jù)vue會報(bào)錯，所以需要在data里重新定義屬性名并將props里的數(shù)據(jù)接收。

2、首先想到的肯定是在computed計(jì)算屬性里監(jiān)聽數(shù)據(jù)的變化，那就直接在computed里監(jiān)聽父組件傳遞過來的props數(shù)據(jù)的變化，如果有變動就進(jìn)行操作，如：

export default {
 name: 'SwitchButton',
 props: {
  status: {
   type: Boolean,
   default () {
    return false
   }
  }
 },
 data () {
  return {
   switchStatusData: this.status // 重新定義數(shù)據(jù)
  }
 },
 computed: {
  switchStatus: function () {
   return this.status // 直接監(jiān)聽props里的status狀態(tài)
  }
 }
 }
}

這樣就可以在使用switchStatus的地方動態(tài)的監(jiān)聽到父組件status的變化。似乎只針對簡單的數(shù)據(jù)類型有效。

方法2：

使用watch和computed組合實(shí)現(xiàn)：如

export default {
 name: 'SwitchButton',
 props: {
  status: {
   type: Boolean,
   default () {
    return false
   }
  }
 },
 data () {
  return {
   switchStatusData: this.status
  }
 },
 computed: {
  switchStatus: function () {
   return this.switchStatusData // 監(jiān)聽switchStatusData 的變化
  }
 },
 watch: {
  status (newV, oldV) { // watch監(jiān)聽props里status的變化，然后執(zhí)行操作
   console.log(newV, oldV)
   this.switchStatusData = newV
  }
 },
 methods: {
  switchHandleClick () {
   this.switchStatusData = !this.switchStatusData
   this.$emit('switchHandleClick', this.switchStatusData)
  }
 }
}

下面是實(shí)現(xiàn)該組件的代碼：

<template>
 <span class="switch-bar" :class="{'active': switchStatus}" @click="switchHandleClick"><span class="switch-btn"></span></span>
</template>
<script>
export default {
 name: 'SwitchButton',
 props: {
  status: {
   type: Boolean,
   default () {
    return false
   }
  }
 },
 data () {
  return {
   switchStatusData: this.status
  }
 },
 computed: {
  switchStatus: function () {
   return this.status
  }
 },
 // watch: {
 //  status (newV, oldV) {
 //   console.log(newV, oldV)
 //   this.switchStatusData = newV
 //  }
 // },
 methods: {
  switchHandleClick () {
   this.switchStatusData = !this.switchStatusData
   this.$emit('switchHandleClick', this.switchStatusData)
  }
 }
}
</script>
<style lang="stylus" scoped>
 @import "~styles/varibles.styl"
 .area-wrapper
  line-height: .8rem;
  padding: 0 .4rem;
  .switch
   float: right;
   font-size: 0;
  .switch-bar
   position: relative;
   display: inline-block;
   width: .8rem;
   height: .4rem;
   border-radius: .4rem;
   background: #ddd;
   border: 2px solid #ddd;
   vertical-align: middle;
   transition: background .3s, border .3s;
   &.active
    background: $bgColor;
    border: 2px solid $bgColor;
    .switch-btn
     left: .4rem;
     background: #fff;
  .switch-btn
   position: absolute;
   left: 0px;
   display: inline-block;
   width: .4rem;
   height: .4rem;
   border-radius: .2rem;
   background: #fff;
   transition: background .3s, left .3s;
</style>

看完了這篇文章，相信你對“VUE里子組件怎樣獲取父組件動態(tài)變化的值”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道，感謝各位的閱讀！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

新聞名稱：VUE里子組件怎樣獲取父組件動態(tài)變化的值-創(chuàng)新互聯(lián)
URL鏈接：http://muchs.cn/article26/djipjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、用戶體驗(yàn)、定制開發(fā)、網(wǎng)站設(shè)計(jì)公司、移動網(wǎng)站建設(shè)、網(wǎng)站營銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)