openks / learn-vue

自定义组件文档
https://openks.github.io/learn-vue
0 stars 0 forks source link

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

Open openks opened 6 years ago

openks commented 6 years ago

自定义组件依赖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的一部分传个子组件,这样该组件就彻底变成了显示组件就不会出现这种问题了