vue使用watch监听拿到props的传值

<script>
    export default {
        data() {
            return {
                floorData0: {},
                floorData1: {},
                floorData2: {},
            }
        },
        props:['floorData'],
        watch:{
            floorData:val => {
                console.log(this.floorData);
                this.floorData0 = this.floordata[0];
                this.floorData1 = this.floordata[1];
                this.floorData2 = this.floordata[2];
            }
        }
    }
</script>

在floorData传值成功的前提下,有时候会出现直接在 watch 里面通过 this.floorData 是无法拿到的,总是显示 undefined。然后需要通过 newVal和oldVal这么处理,才能拿到 floorData 的值:

        watch:{
            floorData:(newVal,oldVal) => {
                console.log(newVal);
                this.floorData0 = newVal[0];
                this.floorData1 = newVal[1];
                this.floorData2 = newVal[2];
            }
        }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • # 传智播客vue 学习## 1. 什么是 Vue.js* Vue 开发手机 APP 需要借助于 Weex* Vu...
    再见天才阅读 9,041评论 0 6
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,022评论 1 45
  • 三八理论,就是上帝给了每个人每天公平的三个8小时,第一个8小时大家都在工作,第二个8小时大家都在睡觉,人与人的区别...
    凉王_4801阅读 4,079评论 0 0
  • 去年夏天,我和一位朋友一起从国外回来,在机场,朋友给他儿子买了好几种零食,然后又给父母亲,给妻子买礼物,给同事们买...
    杨仲凯律师阅读 4,262评论 1 6
  • 2017年5月30日,月末,端午。 小长假三天,私心觉得三天假期完全当不起一个“长”字。以担心焦虑开始了的这个假期...
    与张白水阅读 1,540评论 0 0