詳解VUE里子組件如何獲取父組件動態(tài)變化的值

更新時間：2018年12月26日 09:30:52 作者：Amor丶Diamond

這篇文章主要介紹了詳解VUE里子組件如何獲取父組件動態(tài)變化的值，子組件通過props獲取父組件傳過來的數(shù)據(jù)，子組件存在操作傳過來的數(shù)據(jù)并且傳遞給父組件,需要的朋友可以參考下

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

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

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

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

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

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

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

方法1：

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

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

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組合實現(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)
  }
 }
}

下面是實現(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>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: