详解VUE里子组件如何获取父组件动态变化的值

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

下⾯是实现该组件的代码：

以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。