在VUE裡父元件給子元件間使用props方式傳遞資料，但是希望父元件的一個狀態值改變然後子元件也能監聽到這個資料的改變來更新子元件的狀態。

場景：子元件通過props獲取父元件傳過來的資料，子元件存在操作傳過來的資料並且傳遞給父元件。

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

1.父元件可以向按鈕元件傳遞預設值。

2.子元件的操作可以改變父元件的資料。

3.父元件修改傳遞給子元件的值，子元件能動態監聽到改變。

比如父元件點選重置，開關元件的狀態恢復為關閉狀態：

方法1：

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

2、首先想到的肯定是在computed計算屬性裡監聽資料的變化，那就直接在computed裡監聽父元件傳遞過來的props資料的變化，如果有變動就進行操作，如：

export default {
  name: 'SwitchButton',
  props: {
    status: {
      type: Boolean,
      default () {
        return false
      }
    }
  },
  data () {
    return {
      switchStatusData: this.status // 重新定義資料
 

    }
  },
  computed: {
    switchStatus: function () {
      return this.status // 直接監聽props裡的status狀態
    }
  }
  }
}

這樣就可以在使用switchStatus的地方動態的監聽到父元件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  // 監聽switchStatusData 的變化
    }
  },
  watch: {
    status (newV, oldV) { // watch監聽props裡status的變化，然後執行操作
      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>