子组件使用created或者mounted通常只能在组件初始化的时候,获取父组件传过来的props数据。

父组件props数据发生变化,子组件默认无法感知,因此需要手动实现子组件监听父组件变化的功能。

一般的值类型数据,可以直接使用watch监听:

watch: {
    msg(newVal, oldVal){//对引用类型的值无效
        console.info('value changed ', newVal)
    }
}

引用类型,普通watch方法,无法监听到引用类型内部的变化。

解决此问题,可以在父组件中将变化的对象变成一个新的对象,自主实现深拷贝,例如:

methods: {
    addAge(){
        this.child.age ++;
        this.child = JSON.parse(JSON.stringify(this.child));
    }
}

但是这样做不是很优雅,vue提供了方便的深拷贝的方式去监听引用类型值的变化,例如:

watch: {
    msg: {
        handler(newVal, oldVal) {
            console.info('value changed 2', newVal)
        },
        deep: true
    }
}

 

完整例子:

1. 父组件Game.vue向子组件传递props值

<template>
    <div class="game">
        <button @click="addAge">birthday++</button>
        <DNF :msg="child"></DNF>
    </div>
</template>
<script>
import DNF from './DNF'
export default {
    name: 'Game',
    components: {
        DNF
    },
    data () {
        return {
            child:{name:'dnf',age:18},
        }
    },
    methods: {
        addAge(){
            this.child.age ++;
            //this.child = JSON.parse(JSON.stringify(this.child));
        }
    }
}
</script>

2. 子组件DNF.vue 使用watch监听父组件中msg的变化,因为msg是一个object,因此设置 deep:true。

<template>
    <div class="dnf"></div>
</template>
<script>
export default {
    name: 'DNF',
    props: ["msg"],
    watch: {
        msg(newVal, oldVal){//对引用类型的值无效
            console.info('value changed 1', newVal)
        },
        msg: {
            handler(newVal, oldVal) {
                console.info('value changed 2', newVal)
            },
            deep: true
        }
    },
}
</script>

官方文档:https://cn.vuejs.org/v2/guide/computed.html#侦听器

 

转载于:https://www.cnblogs.com/phptree/p/10428726.html

Logo

前往低代码交流专区

更多推荐