Open openks opened 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的一部分传个子组件,这样该组件就彻底变成了显示组件就不会出现这种问题了
自定义组件依赖props与服务端交互,若props发生变化,该组件不会自动重发请求与服务端交互
子组件会依赖props,如果props发生变化则子组件里props相关字段也会跟随发生变化
但是如果需要根据props的相关字段(如id)做请求(在mounted里处理)并将请求结果显示在页面上。
则会出现props发生变化时相关字段会发生变化但不会继续做请求的问题
解决方案1:
使用计算属性获取id值,然后watch这个id值,当id发生变化去调取接口
虽说这种方案也能够是实现该需求,但这种实现是不符合逻辑的,组件只应该有两种情况 1.是显示组件(只负责显示来自props的属性,含格式化props的属性无状态组件) 2.是容器组件(负责处理状态) 解决方案二:(更好实现方案) 把请求的结果作为props的一部分传个子组件,这样该组件就彻底变成了显示组件就不会出现这种问题了