uview笔记

layout布局篇

1.尽量不要用gutter,代替方案如下：

<template>
	<view style="overflow: hidden">
		<u-row :customStyle="margin: 0 -10rpx 10rpx">
			<u-col span="6">
				<view class="demo-layout">
					<u-button type="primary"></u-button>
				</view>
			</u-col>
			<u-col span="6">
				<view class="demo-layout">
					<u-button type="primary"></u-button>
				</view>
			</u-col>
		</u-row>
	</view>
</template>
<style lang="scss">
.demo-layout {
		padding: 10rpx;
    }
</style>

要点 外部包裹设置overflow: hidden u-row使用customStyle属性设置margin为-的需要的尺寸，u-col的内层view 设置需要尺寸的padding

2.uview封装组件
props文件和组件文件
props中写传入参数，默认值写在配置中
组件中

mixins: [uni.$u.mpMixin, uni.$u.mixin, props]

css 都是内部特有css 且声明所有需要的变量，css名称已 组建名__需要设置的名字 (组件内部层级用__分割, 其他用–分割)

3.父子双层组件
父组件
父组件中computed获取外部页面传入变化

computed: {
			// 计算父组件的值是否发生变化
			parentData() {
				return [this.hoverClass, this.col, this.size, this.border];
			},
	}

同时watch监听此变量

watch: {
			// 当父组件需要子组件需要共享的参数发生了变化，手动通知子组件
			parentData() {
				if (this.children.length) {
					this.children.map(child => {
						// 判断子组件(u-radio)如果有updateParentData方法的话，就就执行(执行的结果是子组件重新从父组件拉取了最新的值)
						typeof(child.updateParentData) == 'function' &&	child.updateParentData();
					})
				}
			},
		},

子组件
在data中定义parentDate参数

data() {
	return {
		parentData: {
			col: 3, // 父组件划分的宫格数
			border: true, // 是否显示边框，根据父组件决定
		}
	};
},

当页面变化时调用mixins 中的getParentData方法同步参数的变化情况

getParentData(parentName = '') {
            // 避免在created中去定义parent变量
            if (!this.parent) this.parent = {}
            // 这里的本质原理是，通过获取父组件实例(也即类似u-radio的父组件u-radio-group的this)
            // 将父组件this中对应的参数，赋值给本组件(u-radio的this)的parentData对象中对应的属性
            // 之所以需要这么做，是因为所有端中，头条小程序不支持通过this.parent.xxx去监听父组件参数的变化
            // 此处并不会自动更新子组件的数据，而是依赖父组件u-radio-group去监听data的变化，手动调用更新子组件的方法去重新获取
			this.parent = this.$u.$parent.call(this, parentName)
            if (this.parent.children) {
                // 如果父组件的children不存在本组件的实例，才将本实例添加到父组件的children中
                this.parent.children.indexOf(this) === -1 && this.parent.children.push(this)
            }
            if (this.parent && this.parentData) {
                // 历遍parentData中的属性，将parent中的同名属性赋值给parentData
                Object.keys(this.parentData).map((key) => {
					console.log(key, '666')
                    this.parentData[key] = this.parent[key]
                })
            }
        },