代码改变世界

值类型的侦听器watch不触发 要使用immediate: true

  法子  阅读(264)  评论(0编辑  收藏  举报

现象:一个组件的变量有初始值,然后,如果在引用该变量的页面onLoad中为组件的变量赋不同的新值,不触发对该变量的watch回调

原因:onLoad的时候,组件还没有初始化完成,修改其变量的值相当于给它一个初始化的值,所以不会触发watch的回调。

解决:watch 里应该加上immediate: true,以便在创建侦听器时,立即执行一遍回调。

组件radios中

复制代码
export default {
  props: {
    current: {
      type: [String, Number],
      default: '0',
    },
  },
  data () {
    return {
      selectIndex: 0
    }
  },
  watch: {
    current: {
      handler (val) {
        this.selectIndex = val
      },
      immediate: true
    }
  }
}
复制代码

引用组件的页面

复制代码
<template>
    <view>
        <Radios :current="radioIndex"/>
    </view>
</template>
<script>
import Radios from './radios';
export default {
    components: {
        Radios
    },
    data () {
        return {
            radioIndex: 0
        }
    },
    onLoad (options) {
        this.radioIndex = 1
    }
}
</script>    
复制代码

 

相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
点击右上角即可分享
微信分享提示