3-19 关于避免使用边界值情况$refs

最新推荐文章于 2023-07-05 18:56:28 发布

原创最新推荐文章于 2023-07-05 18:56:28 发布 · 212 阅读

CC 4.0 BY-SA版权

在销户项目中进行响应式操作时，监听对象本身无法触发回调函数。查阅官方文档得知需添加选项值 deep，指定 deep: true 可发现对象内部值变化，监听数组变动无需此操作。同时提醒不要被组件表象迷惑，操作的是组件内部，触发事件时做好区分。

销户项目

1.在项目里，用到使用`$watch`来进行响应式操作，但是发现无论如何监听一个对象本身，都触发不了回调函数，如下：

    // 监测账号选择索引列表,保证响应式赋值
    this.$watch('checkIndexListMap', val => {
      this.checkIndexListMap.cancelStockAccountList = this.$refs.stockList.checkAccountIndexList

    })

后来查阅官方文档才发现，需要加一个选项值deep才行

选项：deep

为了发现对象内部值的变化，可以在选项参数中指定 deep: true 。注意监听数组的变动不需要这么做。

vm.$watch('someObject', callback, {
  deep: true
})
vm.someObject.nestedValue = 123
// callback is fired

2.不要被组件所迷惑，实际上操作的都是组件内部。

<!-- 基金帐户 -->
    <FinanceList
      ref="foundation"
      type="fund"
      :useSelect="Account.businType == 600368"
      :accounts="Account.cancelOfstockAccountList.toJS()"
      :allChecked="allChecked"
      @foundationSelectListChanged="foundationSelectListChanged"
    />

    <!-- 证券理财 -->
    <FinanceList
      ref="secumList"
      type="secum"
      :useSelect="Account.businType == 600368"
      :accounts="Account.cancelSecumAccountList.toJS()"
      :allChecked="allChecked"
      @secumListSelectListChanged="secumListSelectListChanged"
    />

    <!-- 银行理财 -->
    <FinanceList
      ref="bankmList"
      type="bankm"
      :useSelect="Account.businType == 600368"
      :accounts="Account.cancelBankmAccountList.toJS()"
      :allChecked="allChecked"
      @bankmListSelectListChanged="bankmListSelectListChanged"
    />

上面看着像是三个相同组件的叠加，事实上是通过type进行区分的三个独立的组件’。而我们在操作组件内部触发事件时，区分即可。

     // 对外抛出选中的账号index列表
    this.$watch('checkAccountIndexList', val => {
      if(this.type=='fund'){
      this.$emit('foundationSelectListChanged', this.checkAccountIndexList)
      }else if(this.type=='secum'){
        this.$emit('secumListSelectListChanged', this.checkAccountIndexList)
      }
      else if(this.type=='bankm'){
        this.$emit('bankmListSelectListChanged', this.checkAccountIndexList)
      }
      })