销户项目
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)
}
})