vue组件在方法中使用props值,vue props传值不随着变化而变化
本文主要介绍了vue组件的props属性无法监控值变化的问题，有很好的参考价值，希望对大家有所帮助。如有错误或不足之处，请不吝赐教。
目录
props属性不能监听值的变化。道具听变的几种方式。应用场景1 .计算的计算属性2 .方法方法3 .观察监听器
props属性监听不到值变化问题
写项目的时候，遇到了一个问题。父组件传递给子组件的道具，但子组件无法监控更改。
看vue文档，了解到watch有深度监控的方法。
阅读vue文档如下代码。=》
var vm=new Vue({
数据：{
答：1，
乙：2，
c: 3，
d: 4，
e: {
女：{
g: 5
}
}
},
观察：{
答：函数(val，oldVal) {
console.log(新：%s，旧：%s ，val，oldVal)
},
//方法名称
b:“某种方法”，
//当任何被侦听对象的属性发生更改时，都会调用此回调，无论它的嵌套有多深。
丙：{
处理程序：函数(val，oldVal) { /*.*/},
深：真的
},
//这个回调会在监听开始后立即调用。
丁：{
处理程序： someMethod ，
即时：正确
},
//可以传入回调数组，它们会被逐个调用
电子版：[
手柄1 ，
函数handle2 (val，oldVal) { /*.*/},
{
处理程序：函数handle3 (val，oldVal) { /*.*/},
/* .*/
}
],
//观察vm.e.f的值：{g: 5}
e.f: function (val，oldVal) { /*.*/}
}
})
vm.a=2 //=新：2，旧：1
此时，您可以监视对象内部的属性更改。
怀疑，项目中的单层对象，没有嵌套对象，连变化都监控不到。
践踏的一天。
props监听变化的几种方式
应用场景
在vue中，亲子组件通过props传输数据。通常有以下几种情况：
子组件显示父组件传递的道具。一般情况下，字符串子组件通过计算父组件的属性来获得某个值。子组件修改父组件传递的属性。
1.computed 计算属性
使用场景：当pros传递的值不能直接使用时，可以使用calculated属性。
比如拼接省市三个字段后需要显示一个完整的地址。
计算基于依赖关系进行缓存。当props不变时，多次访问addrese计算属性将立即返回结果，而不必再次执行计算。
道具：{
省份：字符串，//省份
城市：字符串，//城市
面积：字符串//面积
},
计算值：{
地址(){
返回“{ this . province } { this . city } { this . area }”
}
}
2.methods 方法
上述计算属性也可以通过方法实现，但是方法不会被缓存，通常用方法来处理业务逻辑。
3.watch 侦听器
使用场景：使用传递的道具作为初始值，比如城市选择列表的默认城市。当我们想要选择一个城市时，改变这个值。
单向数据流
对父属性的更新向下传递到子组件。
当我们需要修改子组件中父组件传递的道具时，如果我们直接修改，vue会报错，因为如果子组件直接修改父组件的道具，会让应用的数据流难以理解。
解决方案
为了不直接修改props的值，可以在data中用props初始化一个数据属性，以后再修改这个数据属性。
但这将导致父组件改变时data属性不更新(注意：仅针对基本类型，如果是引用类型，仍然会改变。因为引用类型的内存地址没有改变)
此时，为了更新这个数据属性，您需要使用一个监听器来监听props中的变化。
深度监听
使用场景：当某个值发生变化时，执行异步请求。
计算和方法此时不合适。
基本类型手表：{
msg(newV，oldV) {
//做点什么
console.log(newV，oldV)
}
}
类型1。计算属性(推荐)
引用类型内部的一个字段是通过计算属性得到的，然后用监听器来监控字段的变化。
道具：{
配置：对象
},
计算值：{
isShow() {
返回this.config.role.isShow
}
},
观察：{
isShow(newV，oldV) {
//做点什么
console.log(newV，oldV)
}
}
2 .深度
道具：{
配置：对象
},
观察：{
isShow:{ //深度监听，可监听到对象、数组的变化
处理器（新的，旧的){
//做点什么，可使用这
console.log(newV，oldV)
},
深：真的
}
},
监听对象中的某个值
道具：{
选项：对象
},
观察：{
option.text(newVal，oldVal){
console.log(newVal，old val)；
}
}
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。