vue/uniapp 控制组件css实例

index.vue

<template>
	<view>
		<father class="fa" size="500rpx"></father>
	</view>
</template>

<script>
	import father from '../../com/father.vue'
	import son from '../../com/son.vue'
	export default {
		components:{
			father,
			son
		},
		data() {
			return {
				
			}
		},
		onLoad() {
			
		},
		methods: {

		}
	}
</script>
<style>
/* 	.fa{
		position: fixed;
		top: 50%;
	} */
</style>
<style scoped>
	
</style>

father.vue

<template>
	<view class="father" :style="myStyle">
		<son :size="parseInt(this['size'])/2+'rpx'"></son>
	</view>
</template>

<script>
	import son from './son.vue'
	export default {
		components:{
			son
		},
		props:{
			size:{
				type:String,
				default:'100rpx'
			},
			color:{
				type:String,
				default:'red'
			}
		},
		mounted(){
			const that=this;
			for(const index in that['_props'])
				that['myStyle']+='--'+index+':'+that['_props'][index]+';';
		},
		data() {
			return {
				myStyle:''
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style scoped>
	.father{
		height: var(--size);
		width: var(--size);
		background-color: var(--color);
	}
</style>

son.vue

<template>
	<view class="son" :style="myStyle">
		
	</view>
</template>

<script>
	export default {
		props:{
			size:{
				type:String,
				default:'50rpx'
			},
			color:{
				type:String,
				default:'yellow'
			}
		},
		mounted(){
			const that=this;
			for(const index in that['_props'])
				that['myStyle']+='--'+index+':'+that['_props'][index]+';';
		},
		data() {
			return {
				myStyle:''
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style scoped>
	.son{
		height: var(--size);
		width: var(--size);
		background-color: var(--color);
	}
</style>