VUE中用props+计算属性/侦听器实现子组件监听父组件数据的变化

VUE中用props子组件监听父组件数据的变化

在不使用vuex的情况下，如何监听呢？

1. 一开始想的是在子组件里的data中重定义props中接收的数据，再通过methods中定义的方法来监听，发现不可行，data里重定义的数据并不会随着父组件传过来的数据的变化而变化
2. 后来用计算属性来监听data里重定义的数据，发现也不可以，于是放弃data的重定义。
3. 发现计算属性和侦听器都可以直接监听props里的属性，代码如下：

父组件：

<template>
  <div class="home">
    <child :status="status"></child>
    <button @click="changestatus">改变状态</button>
  </div>
</template>

<script>
// @ is an alias to /src
import child from '../components/child.vue'

export default {
  data() {
    return {
      status: false
    }
  },
  name: 'home',
  components: {
    child
  },
  methods: {
    changestatus() {
      // console.log(this.status)
      this.status = !this.status
      console.log(this.status)
    }
  }
}
</script>

子组件（用计算属性监听）

<template>
  <div>
    <button>{{switchStatus}}</button>
  </div>
</template>

<script>
export default {
    props: {
      status: {
        type: Boolean,
        default () {
          return false
        }
      }
    },
  computed: {
    switchStatus: function () {
      return this.status
    }
  }
  }
</script>

<style scoped>

</style>

可以实现监听：
子组件（用侦听器监听）

<template>
  <div>
    <button>{{mystatus}}</button>
  </div>
</template>

<script>
export default {
    props: {
      status: {
        type: Boolean,
        default() {
          return false
        }
      }
    },
   data() {
      return {
        mystatus: false
      }
   },
   watch: {
    status (newV, oldV) { // watch监听props里status的变化，然后执行操作
      this.mystatus = newV
      return this.mystatus
    }
    }
  }
</script>

<style scoped>

</style>

效果和计算属性监听相同

再有总结会再补充