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

发布于 2022-09-13 01:09:24 字数 320 浏览 12 评论 0

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

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

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

窗影残 2022-09-20 01:09:24

题主可能提错了问题

业务逻辑依赖多个 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
  }
}

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

゛时过境迁 2022-09-20 01:09:24

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

watch: {
  text: {
    handler(newValue){
    // dosomething
    },
    immeidate: true,
  }
}
囍笑 2022-09-20 01:09:24

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

风筝在阴天搁浅。 2022-09-20 01:09:24

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文