vue 子组件接收值时不能实时更新

prop接收父组件传值时watch不能实时监听刷新数据

事情是这样的:当我在一个表单中引入了下拉框子组件,子组件中有我父组件传入的value值。通过prop接收并且使用watch来监听值得变化。 添加的时候一切都很顺畅丝滑,和平安逸。可就在编辑时候下拉框的值老是出现不能回显的情况!!! 这使我意识到事情远远没有那么简单。
以下是我不能实时回显的代码:

 props: [
    'monthday'
  ],
 watch: {
    monthday (newVal, oldVal) {
      this.form1.monthday = newVal
    }
 }

眨眼一看并没有什么问题,可他不能实时回显的问题依旧存在啊! 那我们错在那里呢? 我琢磨了一下我们就错在没有看文档,没有面向百度啊。
那么打开文档乍一眼一瞅,仔细一瞧他没啥特别的啊!
那么再进入百度啊,一会车他有了他来了!!!
以下是我根据百度完成的代码:

 props: [
    'monthday'
  ],
 watch: {
    monthday: {
      handler: function (newVal, oldVal) {
        console.log(newVal)
        this.form1.monthday = newVal
      },
      immediate: true
    }
 }

哎呀!!真香!!!

那么这个问题的原因是啥呢?
根据大佬帖子的描述是这样的:
当我们使用watch时有一个特点,就是当值第一次绑定的时候,不会执行监听函数,只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性。

上一篇:Vue源码解析准备篇


下一篇:vue中watch的多种用法