[vue] 子组件动态更新，父组件向子组件Prop传递实时更新

今天工作遇到一个问题，vue中，父组件调用了子组件，初始化的时候可以正确显示。需要实时监控后台数据，向子组件传递，更新页面。

百度了一下，说使用watch可以监听。

试了一下，发现并不能改变。debug模式看了一下，数据已经接收到了，因为子组件还有孙子组件。这部分没有进行监听，修改了孙子组件，发现可以在页面上看到效果了。

这时候，日志中会报错

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "startVal"

发现是因为子组件中如果直接更新操作prop值，有风险，可能会影响到父组件，所以在子组件中建变量来接收存储prop值的动态更新，不直接去修改prop值，问题解决

父组件

<style lang="less">
@import "./home.less";
@import "../../styles/common.less";
</style>

<template>
    <div>
        <div v-show="currNav=='xboot'">
            <h1>欢迎来到后台管理</h1>
        </div>
        <!-- <div v-show="currNav=='xboot-show'"><show/>
        </div> -->
        <div v-show="currNav=='onemap'">
             <Row :gutter="10">
                <Col :md="24">
                    <Row :gutter="5">
                        <Col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px'}">
                        <infor-card id-name="user_created_count" :end-val="count.createUser" iconType="ios-hammer" color="#2d8cf0" intro-text="当前服务器总量"></infor-card>
                        </Col>
                        <Col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px'}">
                        <infor-card id-name="visit_count" :end-val="count.visit" iconType="ios-contact" color="#64d572" :iconSize="50" intro-text="数据库总量"></infor-card>