watch 监听函数
1.在vue框架中有watch监听函数,用来监听数值的改变,监听对象可以是一个变量也可以是一个对象。我此次项目中监听的是日期选择器的变化。2.监听器(watch)是一个对象,要当成对象来使用。3.watch监听的函数接受两个参数:handler:function(newVal,oldVal),第一个参数表示改变后的新值,第二个参数表示改变前的值。监听的数据必须是data中声明过的或者是父组件向子组
1.在vue框架中有watch监听函数,用来监听数值的改变,监听对象可以是一个变量也可以是一个对象。我此次项目中监听的是日期选择器的变化。
2.监听器(watch)是一个对象,要当成对象来使用。
3.watch监听的函数接受两个参数:handler:function(newVal,oldVal)
,第一个参数表示改变后的新值,第二个参数表示改变前的值。监听的数据必须是data中声明过的或者是父组件向子组件传递过来的props中的数据,监听函数有两个参数:
1>. immediate:组件加载立即触发回调函数执行(当值在第一此绑定时并不会执行监听函数,只有值发生改变时才会执行,若需要当最初绑定值时也执行该函数需要用到immediate属性)
2>. deep: 深度监听,为了发现对象内部值的变化,复杂类型的数据时使用,例如数组中的对象内容的改变,注意监听数组的变动不需要这么做。注意:deep无法监听到数组的变动和对象的新增,参考vue数组变异,只有以响应式的方式触发才会被监听到。
eg: 监听属性
<el-col :span="8" :offset="2">
<el-form-item label="实际开工日期" prop="sjkgrq">
<el-date-picker v-model="ruleForm.sjkgrq" type="date" :validate-on-rule-change="false"
value-format="yyyy/MM/dd" format="yyyy/MM/dd" placeholder="选择项目开工日期" :picker-options="KGTime"
:disabled="form.disabled" style="width:256px;">
</el-date-picker>
</el-form-item>
</el-col>
watch: {
"ruleForm.sjkgrq": {
handler: function (val) {
if (val) {
this.isClick = false;
} else {
this.isClick = true;
}
deep: true;
},
},
此时我监听的是ruleFrom对象中的一个属性值:sjkgrq,使用字符串的形式监听对象属性(这样只会给对象的某个特定的属性加监听器),也可以监听ruleFrom的变化,此时会给ruleFrom的所有属性都加上这个监听器,每个属性值的变化都会执行handler。
···数组(一维、多维)的变化不需要通过深度监听,对象数组中对象的属性变化则需要deep深度监听。
更多推荐
所有评论(0)