Vue 中 props监听变化的几种方式 |
您所在的位置：网站首页 › vue子组件props更新 › Vue 中 props监听变化的几种方式 |
|
应用场景
在vue中父子组件是通过props传递数据的。通常有以下几种场景： 子组件展示父组件传递过来的props，一般是字符串子组件通过父组件的props计算得到某个值子组件修改父组件传递过来的props 1.computed 计算属性使用场景：当pros传递过来的值不能直接使用的时候，就可以使用计算属性了。 比如：完整的地址需要将省市区3个字段拼接后展示。 计算属性是基于依赖进行缓存的，当props不变时，多次访问addrese计算属性，会立即返回结果，而不必再次执行计算。 props: { province: String, // 省 city: String, // 市 area: String // 区 }, computed: { address(){ return `${this.province}${this.city}${this.area}` } } 2.methods 方法上面计算属性，通过methods也可以实现，但methods不会进行缓存，而且methods通常用来处理业务逻辑。 3.watch 侦听器使用场景：将传递过来的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) } } 引用类型 计算属性(推荐) 先通过计算属性得到引用类型的内部某个字段，再使用侦听器监听该字段的变化 props:{ config:Object }, computed: { isShow() { return this.config.role.isShow } }, watch: { isShow(newV,oldV) { // do something console.log(newV,oldV) } } 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); } }关于Vue中watch的详细用法见： https://blog.csdn.net/a1056244734/article/details/120790921 参考文章：vue props监听变化的几种方式 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |