目录props属性监听不到值变化问题props监听变化的几种方式应用场景1.computed 计算属性2.methods 方法3.watch 侦听器props属性监听不到值变化问题
在写项目时遇到一个问题,父组件传到子组件的prop,在子组件监听不到变化,
遂查看Vue文档,得知watch有一种深度监听的方法。
阅读vue文档如下代码。=》
var vm = new Vue({
data: {
a: 1,
b: 2,
c: 3,
d: 4,
e: {
f: {
g: 5
}
}
},
watch: {
a: function (val, oldVal) {
console.log('new: %s, old: %s', val, oldVal)
},
// 方法名
b: 'someMethod',
// 该回调会在任何被侦听的对象的 property 改变时被调用,不论其被嵌套多深
c: {
handler: function (val, oldVal) { },
deep: true
},
// 该回调将会在侦听开始之后被立即调用
d: {
handler: 'someMethod',
immediate: true
},
// 你可以传入回调数组,它们会被逐一调用
e: [
'handle1',
function handle2 (val, oldVal) { },
{
handler: function handle3 (val, oldVal) { },
}
],
// watch vm.e.f's value: {g: 5}
'e.f': function (val, oldVal) { }
}
})
vm.a = 2 // => new: 2, old: 1
这时就可以监听到对象内部的属性变化了。
疑惑,项目中单层的对象,没有嵌套的对象,居然也监听不到变化。
踩坑的一天。
在vue中父子组件是通过props传递数据的。通常有以下几种场景:
使用场景:当pros传递过来的值不能直接使用的时候,就可以使用计算属性了。
比如:完整的地址需要将省市区3个字段拼接后展示。
计算属性是基于依赖进行缓存的,当props不变时,多次访问addrese计算属性,会立即返回结果,而不必再次执行计算。
props: {
province: String, // 省
city: String, // 市
area: String // 区
},
computed: {
address(){
return `${this.province}${this.city}${this.area}`
}
}
上面计算属性,通过methods也可以实现,但methods不会进行缓存,而且methods通常用来处理业务逻辑。
使用场景:将传递过来的props作为初始值,比如城市选择列表的默认城市,我们希望选择城市时,改变这个值。
单向数据流
父级 prop 的更新会向下流动到子组件中。
当我们需要在子组件中修改父组件传递过来的props时,如果直接更改,vue会报错的,因为如果子组件直接更改父组件的props,会使应用的数据流向难以理解。
解决方案
为了不直接修改props的值,可以在data中,用props初始化一个data属性,以后更改这个data属性即可。
但是这会导致,父组件变化时,该data属性不会更新(注意:只针对基本类型,如果是引用类型,仍旧是变化的。因为引用类型的内存地址没变)
此时为了更新这个data属性,就需要使用侦听器来监听props的变化。
深度监听
使用场景:当监听到某个值变化后,执行异步请求。
此时computed和methods都不太合适。
watch: {
msg(newV,oldV) {
// do something
console.log(newV,oldV)
}
}
1.计算属性(推荐)
先通过计算属性得到引用类型的内部某个字段,再使用侦听器监听该字段的变化
props:{
config:Object
},
computed: {
isshow() {
return this.config.role.isShow
}
},
watch: {
isShow(newV,oldV) {
// do something
console.log(newV,oldV)
}
}
2.deep
props:{
config:Object
},
watch: {
isShow:{ //深度监听,可监听到对象、数组的变化
handler (newV, oldV) {
// do something, 可使用this
console.log(newV,oldV)
},
deep:true
}
},
监听对象中的某个值
props:{
option:Object
},
watch:{
'option.text'(newVal,oldVal){
console.log(newVal,oldVal);
}
}
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。
--结束END--
本文标题: vue组件props属性监听不到值变化问题
本文链接: https://www.lsjlt.com/news/146376.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0