文章目录

1. 1. 自定义组件依赖props与服务端交互问题

自定义组件依赖props与服务端交互问题

自定义组件依赖props与服务端交互，若props发生变化，该组件不会自动重发请求与服务端交互
子组件会依赖props，如果props发生变化则子组件里props相关字段也会跟随发生变化
但是如果需要根据props的相关字段(如id)做请求(在mounted里处理)并将请求结果显示在页面上。
则会出现props发生变化时相关字段会发生变化但不会继续做请求的问题

解决方案1：
使用计算属性获取id值，然后watch这个id值,当id发生变化去调取接口

// 方案1：使用计算属性获取id值，然后watch这个id值,当id发生变化去调取接口
computed: {
    id: function () {
        return this.propsObj.id
    }
},
watch: {
    id: function (newval, oldval) {
        // console.log('old:', oldval, 'new:', newval)
        this.getObj()
    }
},
methods:{
  getObj () {
    console.log('根据id获取对象', this.id)
  }
}

虽说这种方案也能够是实现该需求，但这种实现是不符合逻辑的，组件只应该有两种情况
1.是显示组件(只负责显示来自props的属性，含格式化props的属性无状态组件)
2.是容器组件(负责处理状态)
解决方案二：（更好实现方案）
把请求的结果作为props的一部分传个子组件，这样该组件就彻底变成了显示组件就不会出现这种问题了