关于vue.js:vue-父组件值发生改变后通过props传值无法及时动态渲染新的值

vue 父组件值产生扭转后, 通过 props 传值无奈及时动静渲染新的值

1. 开发环境 vue
2. 电脑系统 windows10 专业版
3. 在应用 vue 开发的过程中, 咱们常常会应用到 props 进行父子组件之间的传值, 上面分享一下应用 props 遇到的问题, 心愿对你有多帮忙!
4. 父组件代码:

<template>
    <div id="chene">
        <h2> 我是 echarts 模板封装 </h2>
        <div class="top1">
            <button @click="dian1"> 点我 </button>
            <Eche :dataObjpro="dataObj" />
        </div>
        <div class="top2">
            <Eche :dataObjpro="dataObj2" />
        </div>
    </div>
</template>
<script>
import Eche from '@/components/vueechartsmo.vue'
export default {
    name:'eche',
    components:{Eche},
    data(){
        return{
            dataObj:{
                max:1120,
                min:10,
                id:"chenecharts",
                name:'灰太狼',
                title:'管制用域控图',
                show:false
            },
            dataObj2:{
                max:100,
                min:0,
                id:"chenecharts2",
                name:'灰太狼 2',
                title:"剖析用域控图"
            }
        }
    },
    mounted(){// this.dataObj.max=220;},
    methods:{dian1(){// console.log(100);
            this.dataObj.max=220;
            this.dataObj.min=-20;
            this.dataObj.name="陈 1";
            this.dataObj.id="ej";
            this.dataObj.title="我家";
            console.log("我是被批改的值");
            // console.log(this.dataObj);
            console.log("我是被批改的值完结啦");
        }
    }
}
</script>

4-1. 子组件次要代码:

// 留神一: 本次我应用 watch 监听的是对象, 所以要这样写不然没有成果, 因为父组件传过来的是对象, 依据本人的需要自行调整
// 留神二: 要 加上 deep:true // 深度监听, 如果不加上这个配置, 你可能监听不到
// 留神: 在从新赋值的时候, 要应用 vue 的 $nextTick 办法, 不然的话可能无奈渲染到新的数据 / 新的视图。

4-2. 监听效果图如下:

// 比照之前的数据, 咱们能够看到数据产生了变动, 咱们也拿到了最新的数据。

5. 本期的分享到了这里就完结啦, 是不是很 nice, 心愿对你有所帮忙, 让咱们一起致力走向巅峰!!!