父组件监听路由变化，将query通过props推送到子组件，子组件watch没有捕获变化？

Question

parent

<component v-if="DyComp" v-bind:is="DyComp.type" :dataIn="DyComp.data"></component>
    watch: {
        $route: function() {
            console.log("route change");
            var dataUri = this.$route.query.dataUri+'';
            this.DyComp.data.dataUri = dataUri;
            console.log(this.$route.query.dataUri)
        }
    },

child

    props: ["dataIn"],
        watch: {
        dataIn: function() {
            var dataUri = this.dataIn.dataUri;
            console.warn(dataUri, "reload data by dataUri");
            var vm = this;
            if (dataUri) {
                axios
                    .get("/static/baiyunwsz/" + dataUri + ".html")
                    .then(function(res) {
                        console.log(res);
                        vm.article = res.data;
                        // return false;
                    })
                    .catch(function(err) {
                        console.log(err);
                    });
            } else {
                console.log("no dataUri");
                this.fetchData();
            }
        }
    },

父组件watch在路由变化时输出正确
this.DyComp也改变了
但是子组件的watch没有跑起来，请问是什么原因？

Answer 1

因为你在父组件中只是更新了porp的一个属性，所以需要再子组件监听中加上 deep: true, 这样会监听各个attribute变化