VUE中父组件传给子组件传值，watch第一次监听不到

👏作者简介：大家好，我是Rockey，不知名企业的不知名Java开发工程师
🔥如果感觉博主的文章还不错的话，请👍三连支持👍一下博主哦
📝联系方式：he18339193956，加我进群，大家一起学习，一起读书，一起对抗互联网寒冬👀

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站 点击跳转浏览。

今天编程过程中，遇到一个问题就是vue 父组件传给子组件传值，子组件中watch第一次中监听不到，只有第二个数据变化才能检测到变化。经过各种尝试终于解决了这个问题

问题描述:

父组件中主要代码如下:

 <more  :type="curTab"/>

子组件中关键代码如下:

  props: {
    type: {
      type: String,
      default: ''
    }
  },
 watch中关键代码
 watch: {
    type: {
      handler (val, old) {
        this.settype()
      }
    }
  },

在debugger过程中发现父组件中curTab第一次传值，watch中监听不到。经过一番操作，终于解决这个问题，有两种解决这个问题的方法

方法一：加上参数immediate: true

经过查询官网原因，查到的watch默认最开始的数据不会执行回调，就是说不会进行监听数据的变化。

想要第一就进行回调，就像官网说的那样要加上immediate: true选项即可

方法二:延时解决

因为watch检测不到第一次的变化，那么我们可以让代码进行延时在进行赋值

  moreClick () {
      let self = this
      self.curSelectTab = ''
       setTimeout(() => {
         self.curTab = '3'
       }, 50)
    }

是因为最开始old的值就是1
然后由于延时所以把curTab的值设为空字符串 ，然后延时传递过去，相当于有一些默认值 ，然后延时结束再传递过去1或者2 这个值，那么watch就检测到了Tab值的变化。x

结语

🔥一个人可以掌握知识，但只有与他人交流才能形成智慧。
🔥One person can acquire knowledge, but wisdom is formed only in the exchange with others.
📝 欢迎大家关注博主公众号 Rockey小何同学 添加博主微信：he18339193956进群，一起学习，一起成长，一起提高认知。
🏆 我坚信人与人之间的差距是表面上是财富的差距，本质上是大脑中认知的差距，

我们下期再见。