<CheckNumber :max="5" :min="1" v-model="num"/>
给其他组件传值
<template>
<div class="xtx-numbox">
<div class="label">数量</div>
<div class="numbox">
<a href="javascript:;" @click="ins">-</a>
<input type="text" readonly :value="num">
<a href="javascript:;" @click="add">+</a>
</div>
</div>
</template>
<script>
import { ref, watch } from 'vue'
export default {
name: 'CheckNumber',
props: {
max: {
type: Number
},
min: {
type: Number,
default: 1
},
// 接收v-modle
modelValue: {
type: Number
}
},
setup (props, { emit }) {
// 定义num接收传过来的值
const num = ref(props.modelValue)
// 监听num的变化
watch(() => {
return props.modelValue
}, () => {
num.value = props.modelValue
})
function add () {
if (num.value === props.max) {
return
}
num.value++
// 向父组件发送事件
emit('update:modelValue', num.value)
}
function ins () {
if (num.value === props.min) {
return
}
num.value--
emit('update:modelValue', num.value)
}
return {
num,
add,
ins
}
}
}
接收的组件