vue如何解决往组件中传值只执行一次的问题?有没有更简单的方法?

比如平时写后台程序时,只要定义一个函数func(xxx,yyy),每次调用这个函数,函数里面的内容就执行一次,重复调用则重复执行。

而前端vue组件,写好一个组件被其他组件调用,如果不用watch去监听入参,这个组件只有第一次create时运行,第二次参数变更就不运行了。但如果用watch每次都要这么写:
入参写一次,监听写一次。
image.png
太麻烦了。

这个问题有其他解决方法吗,能像写后台程序的函数那样,只要有新的入参(入参变更),就重新执行一次。(即每次都刷新一次组件)

阅读 8.2k
4 个回答

题主可能提错了问题

业务逻辑依赖多个 props + data + computed 如何跟踪变化

写到 created 中很方便, 但后续这些参数变化跟踪会丢失, 写到watch又只能一次跟踪一个参数

两个解决办法, 逻辑一样

created(){
   this.$watch(()=> [this.aaa, this.bbb, this.ccc], ([aaa,bbb,ccc]) => {
       ....
   })
}

另一种就是计算属性了

  computed: {
     myargs() { return [this.aaa, this.bbb, this.ccc] }
  },
  watch: {
     myargs([aaa, bbb, ccc]) {
        .....
     }
  }

当然如果你的处理过程都是同步的, 考虑将你的处理过程抽象出一个返回值, 把整体包装为一个计算属性, 这样就是自动收集依赖关系了

computed: {
  myargs(){
    let { aaa, bbb, ccc } = this
    ...
    return newValue
  }
}

如果处理过程有异步操作, 也可以这么干, 只是稍微有点风险

watch不也是函数吗?watch支持立即执行,不需要在created再写一次:

watch: {
  text: {
    handler(newValue){
    // dosomething
    },
    immeidate: true,
  }
}

watch就是处理这个问题的,传入组件的props变化,如果在watch中有定义就会变更。

用ref可以解决,即在子组件中写一个方法(function resolve(opt))接收一个参数,父组件直接使用ref调用子组件的方法,并且传参: this.$ref.chidRef.resolve(opt)

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题