watch监听器,我把它分为两部分来看待,第一部分是,在组件内部监听组件内部属性的变化。第二部分,则是在父子组件传值的时候,监听父组件传递到子组件的值。
1、组件内部的属性监听
第一种:直接监听data内部某个属性值,通过watch来直接监测demo,如果demo的值变化,value的值也会跟着一起变化。
<template>
<div>
<el-input v-model="demo"></el-input>
{{value}}
</div>
</template>
<script>
export default {
name: 'index',
data() {
return {
demo: '',
value: ''
};
},
watch: {
demo(val) {
this.value = this.demo;
}
}
};
</script>
第二种: 监听data内部某个对象值。如果watch监测的是一个对象的话,直接使用watch是不行的,此时我们可以借助于computed计算属性来完成。
<template>
<div>
<el-input v-model="demo.name"></el-input>
{{value}}
</div>
</template>
<script>
export default {
name: 'index',
data() {
return {
demo: {
name: ''
},
value: ''
};
},
computed: {
newName() {
return this.demo.name;
}
},
watch: {
newName(val) {
this.value = val;
}
}
};
</script>
第三种:deep 深度监听对象,或者监听对象内部的属性
<template>
<div>
<el-input type="text" v-model="childrens.name" />
{{childrens}}
{{childrens.name}}
<el-input type="text" v-model="lastName" />
{{lastName}}
</div>
</template>
<script>
export default {
data() {
return {
childrens: {
name: '小强',
age: 20,
sex: '男'
},
tdArray: ['1', '2'],
lastName: '张三'
}
},
watch: {
//对象内部的属性监听,也叫深度监听
childrens: {
handler: function(val, oldval) {
alert(val)
},
deep: true
},
// 键路径必须加上引号
'childrens.name': function(val, oldval) {
alert(val + 'aaa')
},
lastName(lastName, oldval) {
alert(lastName)
}
}
}
</script>
2、父子组件传值
详情请见 :