vue3双向数据绑定实践

vue3双向数据绑定实践

子组件

<template>
	<view>
		<view class="u-flex font-size-36">
			<image @click="decrease" class="u-m-r-10 rtl-m-r-10 icon-size-56" src="/static/img/down-arrow.png" mode="scaleToFill" />
			<input maxlength="2" @input="onChange" placeholder="" style="padding: 0 12rpx;width: 45rpx;text-align: center;"
			 type="number" v-model.number="stepNumber" />
			<image @click="increase" class="u-m-r-10 rtl-m-r-10 icon-size-56" src="/static/img/up-arrow.png" mode="scaleToFill" />
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref, toRefs } from 'vue';

	type TProps = {
		modelValue: number;
		maxNum: number;
		minNum: number;
	}
	const props = withDefaults(defineProps<TProps>(), {
		modelValue: 1,
		maxNum: 99,
		minNum: 1
	})
	const { modelValue, maxNum, minNum } = toRefs(props)
	const emits = defineEmits(['update:modelValue'])

	const stepNumber = ref(modelValue.value)

	// 双向数据绑定
	const onChange = () => {
		emits('update:modelValue', stepNumber.value)
	}

	// 加
	const increase = () => {
		if(stepNumber.value >= maxNum.value) {
			return;
		}
		stepNumber.value += 1;
	}

	// 减
	const decrease = () => {
		if(stepNumber.value <= minNum.value) {
			return;
		}
		stepNumber.value -= 1;
	}

</script>

<style>
</style>

父组件调用

<template>
  <view>
        <NumberBox @onChange="onChange" v-model="stepNumber" />
  </view>
</template>
<script setup lang="ts">
        import NumberBox from "@/components/NumberBox.vue";
        const stepNumber = ref(1)
</script>