快捷
导航

用wacth方法对父页面传下来的数据进行监听

编辑:刁民害朕
时间:2021-04-01
阅读:1430

最近写了好几个页面,每个页面都对应着好几个子组件,其中大部分组件都需要获得从父组件传下来的数据。

这个数据包含着父组件的某个模块的状态。然后在子组件中通过这个状态来进行参数返回给后台。

在传递参数时,我用的是自定义属性传参,刚开始参数能够很顺利的传递过去。页面返回给后台也很顺利。但是经过几次调试我发现,传递的数据只能保存初始传递的参数,当父页面状态发生改变后,子组件并不能够实时更新。

刚开始我想到了用wacth方法对父页面传下来的数据进行监听,然后重新存入数据到data。

export default {

       name: "financialDetails",

            props :{

            detailData: {

                required: true, // 设置required就不要设置default

                type: Array,

                default: function() {

                    // Array和Object的默认值的设置都是function

                    return [];

            },

        }

        data(){

            return{

                datetable:"",

            }

        },

        watch: {

            detailData: {

                handler: function(new,old) {

                },

                immediate: true

            },

        }

    };

可是我发现这个办法根本行不通,因为使用watch基本用法时有一个特点,就是当值第一次绑定的时候,不会执行监听函数,只有值发生改变才会执行。

如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性。而我发现props接受过来的数据根本就没有一点改变。所以在后期的监听中也没有办法拿到最新的数据,所以只能另想他法。

然后我上网上搜的时候发现都是用watch进行监听。我想着可能是我用的不对。但是问题总是需要解决的,不能一直拖。于是我想到了ref控制子组件的数据,在父组件状态会发生改变的地方定义一个点击事件,然后对子组件进行ref命名,当我们改变父组件状态的时候,利用this.$ref.child.属性名对子组件的参数进行实时更改。

父组件代码块:

<template>

<button @click="changeData()">改变子组件的data</button>

<child ref="childDom"></child>

</template>

<script>

    export default {

    methods: {

    changeData() {

    this.$refs.childDom.msg = “我是父组件”;

    }

    }

  }

子组件代码块:

 <template>

    <h1>{{msg}}</h1>

    </template>

    <script>

    export default {

      data() {    

    msg: "我是子组件的默认值"

    }

  }

问题解决了但是我感觉应该还有更好的方案。


相关文章

APP定制开发,您有充足的理由选择我们

互联网流量在以极快的速度向移动端倾斜,我们始终身在其中,专注研发软件,经验丰富,流程娴熟

多语言专业开发团队
10年项目开发经验,从桌面开发
到移动开发从单系统开发到多系统开发
我们精通代码,经验丰富
坚持输出高品质系统
10年项目开发经验,从桌面开发
到移动开发从单系统开发到多系统开发
我们精通代码,经验丰富
完善兼容各种主流设备
10年项目开发经验,从桌面开发
到移动开发从单系统开发到多系统开发
我们精通代码,经验丰富
稳定靠谱的售后支持
10年项目开发经验,从桌面开发
到移动开发从单系统开发到多系统开发
我们精通代码,经验丰富

返回顶部