VUE里子組件怎樣獲取父組件動態(tài)變化的值

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

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

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

比如想實現一個switch開關按鈕的公用組件：

1.父組件可以向按鈕組件傳遞默認值。

2.子組件的操作可以改變父組件的數據。

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

比如父組件點擊重置，開關組件的狀態(tài)恢復為關閉狀態(tài)：

方法1：

1、因為存在子組件要更改父組件傳遞過來的數據，但是直接操作props里定義的數據vue會報錯，所以需要在data里重新定義屬性名并將props里的數據接收。

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

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

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

方法2：

使用watch和computed組合實現：如

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)
  }
 }
}

下面是實現該組件的代碼：

<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)變化的值”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業(yè)資訊頻道，感謝各位的閱讀！