<template>
<view
class="container-background-gradient"
:style="containerStyle"
>
<slot />
</view>
</template>
<script>
/**
* container-background-gradient 渐变容器组件
* @description 渐变容器组件
* @property {Number} width 宽度
* @property {Number} height 高度
* @property {String} background-color 背景颜色
* @property {String} type 类型
* @value linear-gradient 线性渐变
* @value radial-gradient 径向渐变
* @property {String} direction 线性渐变方向
* @property {Array|String} path 渐变路径
* @example <container-background-gradient :height="100" ></container-background-gradient>
*/
export default {
name: 'ContainerBackgroundGradient',
props: {
backgroundColor: {
type: String,
default: '#ffffff'
},
height: {
type: Number,
default: 0
},
width: {
type: Number,
default: 0
},
type: {
type: String,
default: 'linear-gradient'
},
direction:{
type: String,
default: 'right'
},
path:{
type: String | Array,
default: ''
}
},
data() {
return {
containerStyle:{}
};
},
mounted() {
this.setContainerStyle();
},
methods: {
setContainerStyle(){
let containerStyle = {};
console.log([this.$props, this.$props.width]); // 《-- 控制台输出在这里
if (this.$props.width > 0) {
containerStyle.width = this.$props.width + 'rpx';
}
if (this.$props.height > 0) {
containerStyle.height = this.$props.height + 'rpx';
}
containerStyle.backgroundImage = this.type + '('
+ (this.direction ? this.direction + ',' : '')
+ (this.path instanceof Array ? this.path.join(',') : this.path)
+ ')';
this.containerStyle = containerStyle;
}
}
};
</script>
<style>
</style>
fangxx4
- 发布：2021-01-05 14:02
- 更新：2021-01-05 15:29
- 阅读：996
【不是Bug】 组件通过v-bind方式向props传递属性值， 取不到传入的属性值， 只能取到默认值【get width: ƒ reactiveGetter() 】
分类：uni-app
产品分类： uniapp/H5
PC开发环境操作系统： Mac
PC开发环境操作系统版本号： 10.15
HBuilderX类型： 正式
HBuilderX版本号： 3.0.4
浏览器平台： Chrome
浏览器版本： *
项目创建方式： HBuilderX
示例代码：
操作步骤：
/
/
预期结果：
this.$props.width 或 this.width 应该取到正确的传入参数值
this.$props.width 或 this.width 应该取到正确的传入参数值
实际结果：
this.$props.width 或 this.width 取到的都是固定值750
this.$props.width 或 this.width 取到的都是固定值750
bug描述：
组件通过props传递名为width的参数， 取不到传入的值， 不管传入什么数值， 都变成上层组件设置的默认750；
应该是组件 get width: ƒ reactiveGetter() 里有什么特殊操作的原因。
通过v-bind方式绑的参数在多层传递属性值时好像都有类似问题， 直接输出整个$props是有看到正确的属性值， 但是直接访问取到的是另一个值。
通过控制台输出：
console.log([this.$props, this.$props.width]);
-》
(2) [{…}, 750]
0:
backgroundColor: "#ffffff"
direction: "to right"
height: 100
path: "#FF511F,#FF8B49,#FF511F"
type: "linear-gradient"
width: 480
get backgroundColor: ƒ reactiveGetter()
set backgroundColor: ƒ reactiveSetter(newVal)
get direction: ƒ reactiveGetter()
set direction: ƒ reactiveSetter(newVal)
get height: ƒ reactiveGetter()
set height: ƒ reactiveSetter(newVal)
get path: ƒ reactiveGetter()
set path: ƒ reactiveSetter(newVal)
get type: ƒ reactiveGetter()
set type: ƒ reactiveSetter(newVal)
get width: ƒ reactiveGetter()
set width: ƒ reactiveSetter(newVal)
proto: Object
1: 750
length: 2
1 个回复
fangxx4 (作者)
Sorry, 这个问题不是bug， 是我对VUE不熟悉的原因，
把多层组件间props重组的逻辑放到了mounted事件里， 但是mounted事件的顺序是从内到外， 里层的子组件会先执行， 外层的组件mounted事件响应会后执行。
要把props重组传递的逻辑放到created 事件， created 事件的执行顺序跟mounted事件的顺序相反， 是从外向内的顺序执行。
把mounted改为created后， props的value和setter的值就一致了。